如何在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内获取图例和图标div但我需要将它们分开，而legend可以滑动，在这种情况下我必须替换{来自col-md-10 map的{​​1}}。

你能告诉我怎么做吗？

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

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

此解决方案有效，因为Bootstrap 4现在是flexbox。您可以使用clearfix break（例如.row或<div class="col-12"></div>非常5列）将5个colins包含在相同的<div class="w-100"></div>中。