首页 > bootstrap> 详细内容
bootstrap常用布局例子
日期:2018-11-28 
左小右大,不隐藏
 <DIV class="container">
 <DIV class="row">
<DIV class="col-md-4 col-sm-4 col-xs-12"><div style=" background:#999">aaaa</div></DIV>
<DIV class="col-md-8 col-sm-8 col-xs-12"><div style=" background:#0C3">bbbb</div></DIV>
</DIV>
</div>
左小右大,小屏幕隐藏
<DIV class="container">
<DIV class="row">
<DIV class="contain-left fl col-lg-3 col-md-3 col-sm-3 hidden-xs"><div style=" background:#999">aaaa</div></DIV>
<DIV class="contain-right fr col-lg-9 col-md-9 col-sm-9 col-xs-12"><div style=" background:#0C3">bbbb</div></DIV>
</DIV>
</DIV>
 左大右小,小屏幕隐藏
 <DIV class="container">
  <DIV class="row">
  <DIV class="contentbox col-lg-10 col-md-10 col-sm-10 col-xs-12"><div style=" background:#999">aaaa</div></DIV>
  <DIV class="col-lg-2 col-md-2 col-sm-2 hidden-xs"><div style=" background:#0C3">bbbb</div></DIV>
  </DIV></DIV>
 嵌套
<DIV class="container">
<DIV class="row">
<DIV class="col-md-4 col-sm-4 col-xs-12"><div style=" background:#999">aaaa</div></DIV>

<DIV class="col-md-8 col-sm-8 col-xs-12">
<DIV class="col-md-6 col-sm-6 col-xs-12"><div style=" background:#0C3">bbbb</div></DIV>
<DIV class="col-md-6 col-sm-6 col-xs-12"><div style=" background:#0C3">ccc</div></DIV>
<DIV class="col-md-6 col-sm-6 col-xs-12"><div style=" background:#0C3">ddd</div></DIV>
<DIV class="col-md-6 col-sm-6 col-xs-12"><div style=" background:#0C3">eee</div></DIV>
<DIV class="clearfix"></DIV>
</DIV> </DIV>