BootStrap栅格系统

最新推荐文章于 2024-06-15 11:16:54 发布

原创最新推荐文章于 2024-06-15 11:16:54 发布 · 300 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了响应式网页设计中的关键元素——栅格系统。通过实例展示了如何使用不同的屏幕尺寸设定列数，实现内容在不同设备上的合理布局。包括了超小屏幕、小屏幕、中等屏幕和大屏幕的适配策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

2.栅格系统参数

四种屏幕，超小屏幕<768px,小屏幕>=768,中等屏幕>=992，大屏幕>=1200,列数都是12，均可嵌套

3.   <div class="row">
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
   </div>
</div> -->

lg是当屏幕大于1200时，每列显示三个，每行就是12除以3，四列

md是屏幕大于992时,每列显示四个，12除以4，三列，以此类推，768和小于768的分别时每列六个，两列

4.<div class="container">
   <div class="row">
       <div class="col-md-8 a">8</div>
       <div class="col-md-3 col-md-offset-1 a">3</div>
   </div>

列偏移，每行十二列，第一个div占八列，第二个div三列，还差一个，让第二个div朝右偏移一列

第一个div中嵌套，里面也是十二列，上面加上样式padding:0,没有边距。

第一个div朝右边移三个位置

第二个div朝左边移9个位置，实现位置交换。