Bootstrap 3.0 – 包含固定列大小的stream体网格
我正在学习如何使用Bootstrap。 目前，我正在涉足布局。 虽然Bootstrap非常酷，但是我看到的所有东西似乎过时了。 对于我的生活，我有我认为是一个基本的布局，我不明白。 我的布局如下所示：
--------------------------------------------------------------------------- | | | | | | | | | 240px | 160px | All Remaining Width of the Window | | | | | | | | | --------------------------------------------------------------------------| 这个网格需要占据整个窗口的高度。 从我的理解，我需要混合固定和stream体宽度。 但是，Bootstrap 3.0似乎没有stream体类了。 即使这样做，我似乎也无法弄清楚如何混合stream体和固定的柱尺寸。 有谁知道如何在Bootstrap 3.0中做到这一点？
谢谢
使用Bootstrap 3真的没有简单的方法来混合stream体和固定宽度。它的意思就是这样，因为网格系统被devise成一个stream畅的，响应式的东西。 你可以尝试黑客入侵，但是这与响应式网格系统试图做的事情背道而驰，其目的是使这种布局在不同的设备types之间stream动。
如果你需要坚持这个布局，我会考虑用自定义的CSS布局你的页面，而不是使用网格。
编辑：由于很多人似乎都想这样做，所以我在这里写了一个更简单的使用案例指南https://www.atlascode.com/bootstrap-fixed-width-sidebars/ 。 希望能帮助到你。
bootstrap3网格系统支持行嵌套，允许您调整根行以允许固定宽度的侧面菜单。
您需要在根行上放置一个填充，然后有一个包含正常网格布局元素的子行。
这里是我通常如何做这个http://jsfiddle.net/u9gjjebj/
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
.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; }
或者在table-cell中使用display属性;
CSS
.table-layout { display:table; width:100%; } .table-layout .table-cell { display:table-cell; border:solid 1px #ccc; } .fixed-width-200 { width:200px; }
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>
我有一个稍微不同的问题：
- 我需要将固定列和stream体列作为表格的一部分，而不是全窗口布局的一部分
- 我需要将列固定在左侧和右侧
- 我并不担心使用包含行的全高的列背景
结果，我浮出了左边和右边的列，然后可以使用Bootstrap的row做中间的液柱。
<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>
国际海事组织，在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); } }
工作Bootstrap 固定stream体演示
更新 ：由于Bootstrap 4将有这样的flexbox布局会更容易： http : //www.codeply.com/go/eAYKvDkiGw
更新2014-11-14：下面的解决scheme太旧了，我推荐使用弹性框布局方法。 这里是一个概述： http ： //learnlayout.com/flexbox.html
我的解决scheme
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
.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; } }
不用修改太多的引导程序布局代码。
更新（不是从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>
好的，我的回答非常好：
<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>
jsfiddle操场
如果你想支持所有浏览器，请使用https://github.com/10up/flexibility
为什么不只是将左边的两列设置为固定的，然后为其余的内容制作完整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>
