如何在Bootstrap容器中实现组件四列同行布局及col类用法学习

一、实现四列布局的修改步骤 #

你当前的代码把「标签+单选框」打包在同一个col-sm-5里，所以只能分成两列。要改成四列，只需拆分结构：

1. 将外层.row拆分为4个col-sm-3（Bootstrap网格是12列，4×3刚好填满一行），分别对应「Gender标签」「Gender单选框」「Age标签」「Age单选框」
2. 修正代码里的小错误：label标签的class属性少了等号，.spread里的text-align: centre拼写错误（应为center），.RadioArray里的多余注释符号
3. 给.row加上align-items-center类，让标签和单选框垂直居中对齐

修改后的完整代码 #

HTML

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <!-- Bootstrap Font Icon CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="PlayRoom.css" type="text/css">
  <title>PlayRoom</title>
</head>

<body>
  <h4>Optional</h4>
  <div class="form-container">

    <div class="RadioArray">
      <div class="row align-items-center">
        <!-- 第一列：Gender标签 -->
        <div class="col-sm-3">
          <span class="spread">Gender:</span>
        </div>
        <!-- 第二列：Gender单选框 -->
        <div class="col-sm-3">
          <div class="RadioBox">
            <div class="form-check">
              <input type="radio" class="form-check-input" id="gender1" name="cGender" value="No Answer" checked>
              <label class="form-check-label" for="gender1">Declined</label>
            </div>
            <div class="form-check">
              <input type="radio" class="form-check-input" id="gender2" name="cGender" value="Male">
              <label class="form-check-label" for="gender2">Male</label>
            </div>
            <div class="form-check">
              <input type="radio" class="form-check-input" id="gender3" name="cGender" value="Female">
              <label class="form-check-label" for="gender3">Female</label>
            </div>
            <div class="form-check">
              <input type="radio" class="form-check-input" id="gender4" name="cGender" value="Neutral">
              <label class="form-check-label" for="gender4">Neutral</label>
            </div>
          </div>
        </div>
        <!-- 第三列：Age标签 -->
        <div class="col-sm-3">
          <span class="spread">Age:</span>
        </div>
        <!-- 第四列：Age单选框 -->
        <div class="col-sm-3">
          <div class="RadioBox">
            <div class="form-check">
              <input type="radio" class="form-check-input" id="cAge1" name="cAgeGroup" value="No Answer" checked />
              <label class="form-check-label" for='cAge1'>Declined</label>
            </div>
            <div class="form-check">
              <input type="radio" class="form-check-input" id="cAge2" name="cAgeGroup" value="under 19" />
              <label class="form-check-label" for='cAge2'>under 19</label>
            </div>
            <div class="form-check">
              <input type="radio" class="form-check-input" id="cAge3" name="cAgeGroup" value="19-40" />
              <label class="form-check-label" for='cAge3'>19 to 40</label>
            </div>
            <div class="form-check">
              <input type="radio" class="form-check-input" id="cAge4" name="cAgeGroup" value="over 40" />
              <label class="form-check-label" for='cAge4'>Over 40</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS

.form-container {
  position: relative;
  margin: 0 auto;
  border-radius: 1.25rem;
  border: 0.375rem solid;
  border-color: #000000;
  background-color: #FFFFFF;
  box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
  padding-top: 1.25rem;
  width: 75%;
  height: 40%;
}

.form-container .RadioArray {
  width: 40rem;
  align-self: center;
  padding-left: 0.938rem;
  padding-right: 0.938rem;
  padding-top: 0.313rem;
  padding-bottom: 0.313rem;
  border-style: groove;
  border-width: 0.125rem;
  border-color: #000000;
  background-color: #FF0000;
  text-align: center;
}

.form-container .RadioBox {
  width: fit-content;
  padding-left: 0.938rem;
  padding-right: 0.938rem;
  padding-top: 0.313rem;
  padding-bottom: 0.313rem;
  border-style: groove;
  border-width: 0.125rem;
  border-color: #009900;
  background-color: #B3FFB2;
  border-radius: 1.25rem;
  font-family: Cabin SemiBold, sans-serif;
  text-align: center;
}

.form-container .spread {
  padding-left: 1rem;
  padding-top: .5rem;
  font-family: Valken, serif;
  color: #8A8A8A;
  height: 2.5rem;
  font-size: 1.150rem;
  font-weight: lighter;
  text-align: center;
}

h4 {
  font-family: fantasy, "Cabin Medium";
  font-size: 1.50rem;
  font-weight: bold;
  color: #CCCCCC;
  text-align: center;
}

二、Bootstrap网格系统快速上手 #

Bootstrap的col没你想的那么复杂，核心就是12列网格规则：

• 所有列必须放在.row容器内
• col-数字：代表占12列中的几格，比如col-3就是1/4宽度，col-6是1/2宽度
• 响应式后缀：col-sm-*（小屏幕）、col-md-*（中屏幕）等，不同断点下自动调整布局
• 辅助类：比如align-items-center让行内元素垂直居中，justify-content-between让列之间均匀分布

直接跟着官方文档的网格示例敲几遍，很快就能熟练，不用怕。

内容的提问来源于stack exchange，提问作者jPaulB