bootstrap栅格布局

<!-- 规则  外面div的class必须是container   里面div的class必须是row       -->

<div class="container">
<div class="row">  　　　　　　　　　　// 12列
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
<div class="col-md-5">5</div>　　　　//col-md-5  占五列
<div class="col-md-7">7</div>　　　　//col-md-7  占七列
</div>
<!-- offset-3 偏移3个列 相当于margin-left -->
<div class="row">
<div class="col-md-3 col-md-offset-3">3</div>
</div>
<!-- 嵌套 row只能嵌套在col里面-->
<div class="row">
<div class="col-sm-9">
1
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-8">12</div>
</div>
</div>
</div>
<!-- row列的顺序问题 col-md-push-7控制元素右移动 col-md-pull-5控制元素左移动-->
<div class="row">
<div class="col-md-5 col-md-push-7">5</div>
<div class="col-md-5 col-md-pull-5">5</div>
</div>
</div>

 

<!--
 超小屏幕 手机 (<768px) .col-xs-数字
小屏幕 平板 (≥768px) .col-sm-数字
中等屏幕 桌面显示器 (≥992px) .col-md-数字
大屏幕 大桌面显示器 (≥1200px) .col-lg-数字
min-width max-width
min-width 400px 最小是400px 400以上都采用制定的样式
max-width 600px 最大值 600px 600以采用 样式
-->
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4">1</div>
<div class="col-xs-4 col-sm-4">2</div>
<div class="col-xs-4 col-sm-4">3</div>
</div>
</div>

 

<!-- clearfix 清除浮动的 -->

 

转载于:https://www.cnblogs.com/jian1234/p/9928463.html