twitter-bootstrap 如何在 Bootstrap 3 中制作 1/5 列网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22691613/
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 1/5 Column Grid in Bootstrap 3
提问by Suffii
I have a layout which I need to put three Div beside each other as:
我有一个布局，我需要将三个 Div 并排放置，如下所示：
<div class="row">
<div class="col-md-1.5" id="legend"></div>
<div class="col-md-0.5" id="icon"></div>
<div class="col-md-10" id="map"></div>
</div>
I know it possible to get the legend and icon div inside one rowbut I need to keep them separate while the legendwill be slide-able and in that case I have to replace the col-md-10from mapwith col-md-11.5.
我知道有可能得到一个内部的传说和图标格row但我需要让他们分开，同时legend将滑动能够在这种情况下，我不得不更换col-md-10从map带col-md-11.5。
Can you lease let me know how I can do this?
你能租借让我知道我怎么能做到这一点吗？
回答by Zim
Bootstrap 3
引导程序 3
Use nesting like this..
像这样使用嵌套..
<div class="row">
<div class="col-md-2">
<div class="col-md-9" id="legend"></div>
<div class="col-md-3" id="icon"></div>
</div>
<div class="col-md-10" id="map"></div>
</div>
Update for Bootstrap 4
Bootstrap 4 的更新
Here's a 1/5 column in Bootstrap 4 (no extra CSS or SASS) using the auto-layout grid..
这是使用自动布局网格的Bootstrap 4 中的 1/5 列（没有额外的 CSS 或 SASS）。
<div class="container-fluid">
<div class="row">
<div class="col-2">2</div>
<div class="col-2">2</div>
<div class="col-2">2</div>
<div class="col-2">2</div>
<div class="col">1/5</div>
</div>
</div>
http://www.codeply.com/go/gjmzB4MTMe
http://www.codeply.com/go/gjmzB4MTMe
This solution works because Bootstrap 4 is now flexbox. You can get the 5 colums to wrap witin the same .rowusing a clearfix break such as <div class="col-12"></div>or <div class="w-100"></div>very 5 columns.
此解决方案有效，因为 Bootstrap 4 现在是 flexbox。你可以得到5个colums包裹witin同样.row使用clearfix休息，如<div class="col-12"></div>或<div class="w-100"></div>非常5列。
