CSS 如何使用容器流体制作固定宽度的列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36060117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a fixed width column with a container-fluid?
提问by somtam
I am trying have a side column on the left with fixed width, and then, on the right a normal Bootstrap container-fluid.
我正在尝试在左侧有一个固定宽度的侧栏，然后在右侧有一个普通的 Bootstrap container-fluid。
Even if the sidebar is not inside the Bootstrap structure, it is OK. I mean it hasn't to be with col-xx-xxclass.
即使侧边栏不在 Bootstrap 结构内，也没关系。我的意思是这与col-xx-xx课堂无关。
Whatever I do the main problem is that I don't manage to make the fluid container stays beside the sidebar.
无论我做什么，主要问题是我无法让流体容器留在侧边栏旁边。
The point is also that if I display to none the sidebar, the fluid container has to use the full width of the page.
重点还在于，如果我不显示侧边栏，则流体容器必须使用页面的整个宽度。
回答by Zim
A fixed-fluidlayout is possible in Bootstrap 3, but now that Bootstrap 4is flexbox this layout is much easier. You just need to enable flexbox, and make a few simple adjustments to set the width of your fixed side column flex: 0 0 300px;, and then flex: 1;on your main column to fill remaining width...
甲固定流体布局是可能的自举3，但现在自举4是Flexbox的这种布局是要容易得多。你只需要启用 flexbox，并做一些简单的调整来设置固定侧栏的宽度flex: 0 0 300px;，然后flex: 1;在你的主栏上填充剩余的宽度......
Bootstrap 4 Alpha 2http://codeply.com/go/eAYKvDkiGw
Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw
Here's a simpler update for the latest Bootstrap 4which is flexbox by default:
这是最新Bootstrap 4的一个更简单的更新，默认情况下是 flexbox：
Bootstrap 4 Alpha 6 or Betahttp://codeply.com/go/V9UQrvLWwz
Bootstrap 4 Alpha 6 或 Beta http://codeply.com/go/V9UQrvLWwz
@media (min-width: 576px) {
.sidebar {
max-width: 280px;
}
}
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-md-4 col-12 sidebar">
</div>
<div class="col-md col-12 main">
<h2>Main (fluid width...)</h2>
</div>
</div>
</div>
Also see: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
另请参阅：如何使用 Twitter Bootstrap 构建 2 列（固定 - 流体）布局？
Update 2018Bootstrap 4.0.0 example
更新 2018 Bootstrap 4.0.0 示例
回答by kartsims
Try including your container-fluidin a divwith margin-left: 200px(where 200px is your sidebar's width).
尝试将您的包含container-fluid在divwith margin-left: 200px（其中 200px 是您的侧边栏的宽度）。
Then position your sidebar with position: absolutefor instance
然后定位你的侧边栏，position: absolute例如
