如何在Bootstrap 3中制作1/5列网格

Question

我有一个布局,我需要将三个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>

我知道有可能得到一个内部的传说和图标格row但我需要让他们分开,同时legend将滑动能够在这种情况下,我不得不更换col-md-10从map带col-md-11.5.

你能租借让我知道怎么做吗？

Answer 1

Bootstrap 3

像这样使用嵌套..

<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>

http://www.bootply.com/125259

Bootstrap 4的更新

这是使用自动布局网格的 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

这个解决方案有效,因为Bootstrap 4现在是flexbox.您可以.row使用clearfix中断(例如<div class="col-12"></div>或<div class="w-100"></div>非常5列)来获取5个colums .