栅格 响应式的列重置

响应式的列重置

以下实例包含了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> 

运行结果:

栅格 响应式的列重置

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 栅格 响应式的列重置

分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址