twitter-bootstrap – 如何在Bootstrap 3中创建1/5列网格

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

我知道有可能将图例和图标div放在一行中,但我需要将它们分开,而图例是可滑动的,在这种情况下,我必须用col-md-替换地图中的col-md-10 11.5.

你能租赁让我知道我怎么做到这一点?

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(没有额外的CSS或SASS)的1/5列.

<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(例如< div class =“col-12”>< / div>)将5个colums包含在同一个.row中.或< div class =“w-100”>< / div>非常5列.

相关文章
相关标签/搜索