bootstrap 划分12列

最新推荐文章于 2023-05-25 21:07:27 发布

转载最新推荐文章于 2023-05-25 21:07:27 发布 · 2.6k 阅读

本文深入探讨了栅格系统在超小屏幕手机、小屏幕平板、中等屏幕桌面显示器及大屏幕大桌面显示器上的布局策略。通过使用.container最大宽度设置为None、（自动）750px、970px、1170px的容器，以及不同的.col-类列定义，实现从堆叠到水平排列的自适应布局。文章还详细介绍了栅格系统中行(row)、列(column)的使用规范，以及如何通过.clearfix和.visible-xs-block元素确保跨设备的一致性。

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

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

行（row）”必须包含在 .container 



超小屏幕 手机
 (<768px) 小屏幕 平板
 (≥768px) 中等屏幕 桌面显示器
 (≥992px) 大屏幕 大桌面显示器
 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None
 （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px
 （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是