前端Wiki/CSS 框架/基础/Bootstrap 栅格系统

栅格 row 与 col

栅格把一行水平切成 12 等份，这是整套系统的核心数字。结构三件套：container > row > col。row 负责作为一行、自带负边距；col 声明占几份。

列宽三种写法：col-4 占 4/12（固定份数，超出一行会自动换行）；col 不带数字，所有 col 平分剩余空间；混合写法 col-6 col-3 col-3 精确分配。12 的好处是可整除性强：2、3、4、6 等分都是整数。

配套的间距工具：g-3（gutter）给 row 设置列间距，比手动给每列加 padding 优雅得多；row-cols-3 直接声明「一行放几个」，适合数量不定的卡片列表。记住：col 只能直接出现在 row 里，中间不能夹别的元素。

本节要点一行 12 等份：col-N 占 N 份，col 平分剩余；g-* 控制列间距，row-cols-* 一行放 N 个；col 必须直接嵌套在 row 里。

代码

<div class="container">
  <!-- 固定份数：col-4 = 4/12，一行放满自动换行 -->
  <div class="row g-3">            <!-- g-3：列间距 -->
    <div class="col-4">占 1/3</div>
    <div class="col-4">占 1/3</div>
    <div class="col-4">占 1/3</div>
  </div>

  <!-- 不带数字：所有 col 平分剩余空间 -->
  <div class="row">
    <div class="col">平分</div>
    <div class="col">平分</div>
  </div>

  <!-- 精确分配 -->
  <div class="row">
    <div class="col-6">一半</div>
    <div class="col-3">1/4</div>
    <div class="col-3">1/4</div>
  </div>

  <!-- row-cols-N：一行固定放 N 个，适合卡片列表 -->
  <div class="row row-cols-3">
    <div class="col">1</div><div class="col">2</div><div class="col">3</div>
    <div class="col">4</div><div class="col">5</div><div class="col">6</div>
  </div>
</div>

🔗 相关词条元素列表栅格 Bootstrap 栅格系统

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读