栅格 列偏移 key:col-md-offset-* - Bootstrap 响应式布局

栅格 列偏移


列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
  1. <div class="row"> 
  2.   <div class="col-md-4">.col-md-4</div> 
  3.   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
  4. </div> 
  5. <div class="row"> 
  6.   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
  7.   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
  8. </div> 
  9. <div class="row"> 
  10.   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
  11. </div>

在下面的实例中,我们有 <div class="col-md-6">..</div>,我们将使用 .col-md-offset-3 class 来居中这个 div。

  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.       <div class="col-xs-6 col-md-offset-3"  
  17.          style="background-color: #dedef8;box-shadow:  
  18.          inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  19.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing  
  20.             elit. 
  21.          </p> 
  22.       </div> 
  23.  
  24.    </div> 
  25. </div> 
  26.  
  27. </body> 
  28. </html> 

运行结果:

\

CTRL + D 收藏本页

学习导航


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