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

发布时间：2020-12-18 00:21:24 所属栏目：安全来源：网络整理

导读：我有一个布局,我需要将三个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放在一行中,但我需要将它们分开,而图例

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!