twitter-bootstrap - 如何在 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与 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 )使用 auto-layout grid ..

<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。您可以将 5 列换成相同的 .row使用 clearfix 中断，例如 <div class="col-12"></div>或 <div class="w-100"></div>非常 5 列。