栅格 列排序 key:col-md-push-*、col-md-pull-* - Bootstrap 响应式布局

栅格 列排序


列排序

通过使用 .col-md-push-*.col-md-pull-* 类就可以很容易的改变列(column)的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
  1. <div class="row"> 
  2.   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
  3.   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
  4. </div>

在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-*.col-md-pull-* 类来互换这两列的顺序。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.    <title>Bootstrap 实例 - 列排序</title> 
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  6.    <script src="/scripts/jquery.min.js"></script> 
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11. <div class="container"> 
  12.  
  13.    <h1>Hello, world!</h1> 
  14.  
  15.    <div class="row"> 
  16.       <p>排序前</p> 
  17.       <div class="col-md-4" style="background-color: #dedef8; 
  18.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  19.          我在左边 
  20.       </div> 
  21.       <div class="col-md-8" style="background-color: #dedef8; 
  22.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  23.          我在右边 
  24.       </div> 
  25.    </div><br> 
  26.    <div class="row"> 
  27.       <p>排序后</p> 
  28.       <div class="col-md-4 col-md-push-8"  
  29.          style="background-color: #dedef8; 
  30.          box-shadow: inset 1px -1px 1px #444,  
  31.          inset -1px 1px 1px #444;"> 
  32.          我在左边 
  33.       </div> 
  34.       <div class="col-md-8 col-md-pull-4"  
  35.          style="background-color: #dedef8; 
  36.          box-shadow: inset 1px -1px 1px #444,  
  37.          inset -1px 1px 1px #444;"> 
  38.          我在右边 
  39.       </div> 
  40.    </div> 
  41.  
  42. </div> 
  43.  
  44. </body> 
  45. </html> 

运行结果:

\

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)