Html 如何使用 Bootstrap 网格强制固定列宽并保持其他列的流畅
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41914954/
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 force a fixed column width with a Bootstrap grid and keep the other ones fluid
提问by LaGuille
I am using Bootstrap and I want to create the grid layout shown on the following image.
我正在使用 Bootstrap，我想创建下图所示的网格布局。
I would like to have a sidebar with a fixed with of 330px, no matter which screen sizes and keep everything inside #page-contentre sizable depending on the resolution of my visitor's screen. 
我想要一个固定为 330px 的侧边栏，无论屏幕尺寸是什么，并#page-content根据访问者屏幕的分辨率将所有内容保持在可调整大小。
How can I achieve the layout shown on the image? If I do the following:
如何实现图像上显示的布局？如果我执行以下操作：
<div class="col-md-10" id="page-content">
<div class="col-md-2">...</div>
<div class="col-md-10">...</div>
</div>
<div class="col-md-2" id="sidebar">
...
</div>
and try to fix the width of #sidebarwith width="330px";for smaller screen sizes, the content will shift to the right, where it can't be seen. Since Bootstrap assigns width: 16.66666667%;to .col-md-2, it seems like I would have to get rid the grid system for the higher level divs, #page-contentand #sidebar. But then, how can I make sure #page-content fills the remaining space at the left of #sidebar.
并尝试修复的宽度#sidebar与width="330px";较小的屏幕尺寸，内容将转移到右侧，它不能被看到。由于 Bootstrap 分配width: 16.66666667%;给.col-md-2，似乎我必须摆脱更高级别 div 的网格系统，#page-content而#sidebar. 但是，我如何确保#page-content 填充 .t 左侧的剩余空间#sidebar。
采纳答案by Gene Parcellano
Bootstrap's grid were meant to be fluid so they're supposed to change as the screen changes size.
Bootstrap 的网格是流动的，所以它们应该随着屏幕大小的变化而变化。
For your desired layout, you can make it happen using display: flexor display:tableinstead. I'm going to go with display:tablefor my example since there's more support for it than the flexbox.
对于您想要的布局，您可以使用display: flex或display:table代替。我将使用display:table我的示例，因为它比 flexbox 有更多的支持。
You will need to change your HTML to something like:
您需要将 HTML 更改为以下内容：
<div class="page">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="blue">test</div>
</div>
<div class="col-md-10">
<div class="green">test</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="gold">test</div>
</div>
</div>
And here's the CSS I used:
这是我使用的 CSS：
.page {
display: table;
width: 100%;
}
.page-content,
.sidebar {
display: table-cell;
}
.sidebar {
width: 330px;
}
.blue,
.green,
.gold {
height: 50px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.gold {
background-color: gold;
}
You can checkout the fiddle here: https://jsfiddle.net/m0nk3y/qjutpze4/
您可以在此处查看小提琴：https: //jsfiddle.net/m0nk3y/qjutpze4/
回答by Sergey
Bootstrap 4.0 beta:
Bootstrap 4.0 测试版：
HTML:
HTML：
<div class="container-fluid">
<div class="row">
<div class="col my-sidebar">
<h2>LEFT</h2>
<h6>(FIXED 230px COLUMN)</h6>
</div>
<div class="col text-center">
<h1>CENTER (FLUID COLUMN)</h1>
</div>
<div class="col my-sidebar">
<h2>RIGHT</h2>
<h6>(FIXED 230px COLUMN)</h6>
</div>
</div>
</div>
CSS:
CSS：
.my-sidebar {
-ms-flex: 0 0 230px;
flex: 0 0 230px;
background-color: greenyellow;
}
@media (max-width: 690px) {
.my-sidebar {
display: none;
}
}
Live example here: https://www.codeply.com/view/PHYTWFDFRU
现场示例：https: //www.codeply.com/view/PHYTWFDFRU
In this example fixed columns will disappear if the browser window width becomes less than 690px. If you want them to be always visible remove the second css-block with @mediaentirely.
在此示例中，如果浏览器窗口宽度小于 690 像素，固定列将消失。如果您希望它们始终可见，请使用@media完全删除第二个 css-block 。
回答by ivandax
Simply fix the width of the element you want fixed and don't add a measure to your bootstrap column (like col-8), by doing this it will take the remaining space automatically.
只需固定您想要固定的元素的宽度，不要在引导列中添加度量（如 col-8），这样做会自动占用剩余空间。
In my case I only had two elements on the row. Hope this helps.
在我的情况下，我在行上只有两个元素。希望这可以帮助。
.fixed{
width: 300px;
}
<body>
<div class="container">
<div class="row">
<div class="fixed">
Fixed Width
</div>
<div class="col">
Fluid
</div>
</div>
</div>
</body>
