我有一个布局,我需要将三个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.
你能租赁让我知道我怎么做到这一点？
解决方法@H_301_10@
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>
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列.
像这样使用嵌套..
<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>
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列.