我正在尝试使用bootstrap 3网格系统将左侧边栏显示的一部分放在顶部,另一部分放在移动设备的底部。右侧边栏给我带来了麻烦。
“左侧底部”被“右侧列”向下推。当“右侧col”较高时,使用col-md-pull-9
时,“左侧底部”会被推出页面。据我所知,使用12个以上的cols可以减少因素。有没有办法避免它?
http://www.bootply.com/t79A9Q20SW
<div class="row">
<aside class="col-md-3 col-sm-12 side" role="complementary">
<div style="height:40px;background-color:red;"><p>(Red) Left col top (top mobile)</p></div>
</aside>
<section class="col-md-6 col-sm-12">
<div style="height:180px;background-color:green;"><p>(Green) Main content</p></div>
</section>
<aside class="col-md-3 col-sm-12 side" role="complementary">
<div style="height:140px;background-color:silver;">(Grey) Right col (bottom mobile)<br>This pushes the "Left col bottom" down/away</div>
</aside>
<aside class="col-md-3 col-sm-12 side col-md-pull-9" role="complementary">
<div style="height:100px;background-color:yellow;">(Yellow) Left col bottom (bottom mobile)(.col-md-pull-9 woks partially when Right col is not high)</div>
</aside>
</div>
<div class="row" style="background-color:grey;"><p align="center">Bottom line</p></div>
(没有右侧边栏,事情变得容易http://www.bootply.com/NlsKWaUFq4)
复制内容并使用Bootstrap可见性类可能会解决它。但它不是很优雅。
答案 0 :(得分:1)
尝试隔离像((首先留下+内容+第二个左边)+右边的部分
<div class="row">
<div class="col-md-9">
<div class="row">
<aside class="col-md-4 col-sm-12 side" role="complementary">
<div style="height:40px;background-color:red;"><p>(Red) First left aside block</p></div>
</aside>
<section class="col-md-8 col-sm-12 main-content">
<div style="height:180px;background-color:green;"><p>(Green) Main content</p></div>
</section>
<aside class="col-md-4 col-sm-12 side side-2" role="complementary">
<div style="height:100px;background-color:yellow;">(Yellow) Second left aside block</div>
</aside>
</div>
</div>
<aside class="col-md-3 col-sm-12 side" role="complementary">
<div style="height:140px;background-color:silver;">(Grey) Right aside</div>
</aside>
</div>
<div class="row" style="background-color:grey;"><p align="center">Bottom line</p></div>
和css
@media (min-width:992px){
.main-content{float:right!important;}
.side-2{float:left!important;}
}