twitter-bootstrap Bootstrap 3.0 - 包含固定列大小的流体网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19231742/
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
Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes
提问by Node Newbie
I am learning how to use Bootstrap. Currently, I'm wading my way through layouts. While Bootstrap is pretty cool, everything I see seems dated. For the life of me, I have what I think is a basic layout that I can't figure out. My layout looks like the following:
我正在学习如何使用 Bootstrap。目前，我正在探索布局。虽然 Bootstrap 很酷，但我看到的一切似乎都过时了。对于我的生活，我有一个我无法弄清楚的基本布局。我的布局如下所示：
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|
This grid needs to take up the full height of the window. From my understanding, I need to mix fixed and fluid widths. However, Bootstrap 3.0 doesn't seem to have the fluid class anymore. Even if it did, I can't seem to figure out how to mix fluid and fixed column sizes. Does anyone know how to do this in Bootstrap 3.0?
这个网格需要占据窗口的整个高度。根据我的理解，我需要混合固定宽度和流体宽度。但是，Bootstrap 3.0 似乎不再具有流体类。即使这样做了，我似乎也无法弄清楚如何混合流体和固定列大小。有谁知道如何在 Bootstrap 3.0 中做到这一点？
采纳答案by Steve K.
There's really no easy way to mix fluid and fixed widths with Bootstrap 3. It's meant to be like this, as the grid system is designed to be a fluid, responsive thing. You could try hacking something up, but it would go against what the Responsive Grid system is trying to do, the intent of which is to make that layout flow across different device types.
在 Bootstrap 3 中混合流动和固定宽度确实没有简单的方法。它应该是这样的，因为网格系统被设计成一个流动的、响应式的东西。你可以尝试修改一些东西，但这会违背响应式网格系统正在尝试做的事情，其目的是使布局在不同的设备类型之间流动。
If you need to stick with this layout, I'd consider laying out your page with custom CSS and not using the grid.
如果您需要坚持这种布局，我会考虑使用自定义 CSS 而不是使用网格来布局您的页面。
回答by Dean North
edit:As lots of people seem to want to do this, I have written up a short guide with a more general use case here https://www.atlascode.com/bootstrap-fixed-width-sidebars/. Hope it helps.
编辑：由于很多人似乎都想这样做，我在https://www.atlascode.com/bootstrap-fixed-width-sidebars/ 上写了一个简短的指南，其中包含更一般的用例。希望能帮助到你。
The bootstrap3 grid system supports row nesting which allows you to adjust the root row to allow fixed width side menus.
bootstrap3 网格系统支持行嵌套，允许您调整根行以允许固定宽度的侧边菜单。
You need to put in a padding-left on the root row, then have a child row which contains your normal grid layout elements.
您需要在根行上放置一个 padding-left，然后有一个包含正常网格布局元素的子行。
Here is how I usually do this http://jsfiddle.net/u9gjjebj/
这是我通常这样做的方式 http://jsfiddle.net/u9gjjebj/
html
html
<div class="container">
<div class="row">
<div class="col-fixed-240">Fixed 240px</div>
<div class="col-fixed-160">Fixed 160px</div>
<div class="col-md-12 col-offset-400">
<div class="row">
Standard grid system content here
</div>
</div>
</div>
</div>
css
css
.col-fixed-240{
width:240px;
background:red;
position:fixed;
height:100%;
z-index:1;
}
.col-fixed-160{
margin-left:240px;
width:160px;
background:blue;
position:fixed;
height:100%;
z-index:1;
}
.col-offset-400{
padding-left:415px;
z-index:0;
}
回答by Frankey
or use display property with table-cell;
或使用带有表格单元格的显示属性；
css
css
.table-layout {
display:table;
width:100%;
}
.table-layout .table-cell {
display:table-cell;
border:solid 1px #ccc;
}
.fixed-width-200 {
width:200px;
}
html
html
<div class="table-layout">
<div class="table-cell fixed-width-200">
<p>fixed width div</p>
</div>
<div class="table-cell">
<p>fluid width div</p>
</div>
</div>
回答by Paddy Mann
I had a slightly different problem:
我有一个稍微不同的问题：
- I needed to combine fixed and fluid columns as part of a table rather than as part of a full-window layout
- I needed to have columns fixed to both the left and right
- I was not worried about the column backgrounds using the full-height of the containing row
- 我需要将固定列和流动列结合起来作为表格的一部分，而不是作为全窗口布局的一部分
- 我需要将列固定在左侧和右侧
- 我不担心使用包含行的全高的列背景
As a result, I resorted to floatto for the left and right columns, and could then use Bootstrap's rowto do the fluid columns in between.
因此，我对float左右列使用了 ，然后可以使用 Bootstraprow来处理它们之间的流体列。
<div>
<div class="pull-left" style="width:240px">Fixed 240px</div>
<div class="pull-right" style="width:120px">Fixed 120px</div>
<div style="margin-left:240px;margin-right:120px">
<div class="row" style="margin:0px">
Standard grid system content here
</div>
</div>
</div>
回答by Zim
Updated 2018
2018 年更新
IMO, the best way to approach this in Bootstrap 3 would be using media queries that align with Bootstrap's breakpoints so that you only use the fixed width columns are larger screens and then let the layout stack responsively on smaller screens. This way you keep the responsiveness...
IMO，在 Bootstrap 3 中解决此问题的最佳方法是使用与 Bootstrap 断点对齐的媒体查询，以便您仅在较大的屏幕上使用固定宽度的列，然后让布局在较小的屏幕上响应堆叠。这样您就可以保持响应速度...
@media (min-width:768px) {
#sidebar {
width: inherit;
min-width: 240px;
max-width: 240px;
min-height: 100%;
position:relative;
}
#sidebar2 {
min-width: 160px;
max-width: 160px;
min-height: 100%;
position:relative;
}
#main {
width:calc(100% - 400px);
}
}
Working Bootstrap Fixed-FluidDemo
Working Bootstrap Fixed-FluidDemo
Bootstrap 4will has flexbox so layouts like this will be much easier: http://www.codeply.com/go/eAYKvDkiGw
Bootstrap 4将有 flexbox，所以像这样的布局会容易得多：http: //www.codeply.com/go/eAYKvDkiGw
回答by Dariusz Filipiak
OK, my answer is super nice:
好的，我的回答非常好：
<style>
#wrapper {
display:flex;
width:100%;
align-content: streach;
justify-content: space-between;
}
#wrapper div {
height:100px;
}
.static240 {
flex: 0 0 240px;
}
.static160 {
flex: 0 0 160px;
}
.growMax {
flex-grow: 1;
}
</style>
<div id="wrapper">
<div class="static240" style="background:red;" > </div>
<div class="static160" style="background: green;" > </div>
<div class="growMax" style="background:yellow;" ></div>
</div>
if you wanna support for all browser, use https://github.com/10up/flexibility
如果您想支持所有浏览器，请使用https://github.com/10up/flexibility
回答by John Xiao
UPDATE 2014-11-14: The solution below is too old, I recommend using flex box layout method. Here is a overview: http://learnlayout.com/flexbox.html
UPDATE 2014-11-14：下面的解决方案太旧了，我建议使用弹性框布局方法。这是一个概述：http: //learnlayout.com/flexbox.html
My solution
我的解决方案
html
html
<li class="grid-list-header row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
<li class="grid-list-item row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
scss
scss
.row-cw {
position: relative;
}
.col-cw {
position: absolute;
top: 0;
}
.ir-msg-list {
$col-reply-width: 140px;
$col-action-width: 130px;
.row-cw-msg-list {
padding-right: $col-reply-width + $col-action-width;
}
.col-cw-name {
width: 50%;
}
.col-cw-keyword {
width: 50%;
}
.col-cw-reply {
width: $col-reply-width;
right: $col-action-width;
}
.col-cw-action {
width: $col-action-width;
right: 0;
}
}
Without modify too much bootstrap layout code.
无需修改太多引导布局代码。
Update (not from OP):adding code snippet below to facilitate understanding of this answer. But it doesn't seem to work as expected.
更新（不是来自 OP）：在下面添加代码片段以促进对这个答案的理解。但它似乎没有按预期工作。
ul {
list-style: none;
}
.row-cw {
position: relative;
height: 20px;
}
.col-cw {
position: absolute;
top: 0;
background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
padding-right: 270px;
}
.col-cw-name {
width: 50%;
background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
width: 50%;
background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
width: 140px;
right: 130px;
background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
width: 130px;
right: 0;
background-color: rgba(150, 150, 0, .5);
}<ul class="ir-msg-list">
<li class="grid-list-header row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
<li class="grid-list-item row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
</ul>回答by mikeschuld
Why not just set the left two columns to a fixed with in your own css and then make a new grid layout of the full 12 columns for the rest of the content?
为什么不在你自己的 css 中将左边的两列设置为一个固定的，然后为其余的内容制作一个完整的 12 列的新网格布局？
<div class="row">
<div class="fixed-1">Left 1</div>
<div class="fixed-2">Left 2</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11"></div>
</div>
</div>
