栅格 响应式的列重置 key:clearfix - Bootstrap 响应式布局

栅格 响应式的列重置

W3CSchool > bootstrap3中文手册 > Bootstrap 响应式布局 > 栅格 响应式的列重置

响应式的列重置

以下实例包含了4个网格,但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题,使用 可以使用 .clearfix class和 响应式实用工具来解决,如下面实例所示:

  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.    <div class="row" > 
  13.       <div class="col-xs-6 col-sm-3"  
  14.          style="background-color: #dedef8; 
  15.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  16.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
  17.       </div> 
  18.       <div class="col-xs-6 col-sm-3"  
  19.          style="background-color: #dedef8;box-shadow:  
  20.          inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  21.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  
  22.             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
  23.             enim ad minim veniam, quis nostrud exercitation ullamco laboris  
  24.             nisi ut aliquip ex ea commodo consequat. 
  25.          </p> 
  26.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  
  27.             eiusmod tempor incididunt ut.  
  28.          </p> 
  29.       </div> 
  30.  
  31.       <div class="clearfix visible-xs"></div> 
  32.  
  33.       <div class="col-xs-6 col-sm-3"  
  34.          style="background-color: #dedef8; 
  35.          box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  36.          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco  
  37.             laboris nisi ut aliquip ex ea commodo consequat.  
  38.          </p> 
  39.       </div> 
  40.       <div class="col-xs-6 col-sm-3"  
  41.          style="background-color: #dedef8;box-shadow:  
  42.          inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  43.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  
  44.             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
  45.             enim ad minim  
  46.          </p> 
  47.       </div> 
  48.    </div> 
  49. </div> 
  50.  
  51. </body> 
  52. </html> 

运行结果:

\

CTRL + D 收藏本页

学习导航


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