如何在HTML卡片中让Quarter与Month、Week与Date分别同行显示？

需求 #

将现有表单中的Quarter与Month输入框置于同一行，Week与Date输入框置于下方同一行。

解决方案 #

利用Bootstrap 4的栅格系统（.row + .col类）实现同行布局，把每组需要同行的输入框包裹在.row容器内，再用.col分配宽度（默认平分每行空间）。

修改后的完整代码 #

<base target="_top">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

<div id="cardsContainer">
  <div class="card-group">
    <div class="card">
      <div class="card-body">
        <form>
          <!-- Quarter与Month同行 -->
          <div class="form-group row">
            <div class="col">
              <label for="quarter">Quarter:</label>
              <input type="text" class="form-control" id="quarter" value="1">
            </div>
            <div class="col">
              <label for="monthNum">Month:</label>
              <input type="text" class="form-control" id="monthNum" value="2">
            </div>
          </div>
          <!-- Week与Date同行 -->
          <div class="form-group row">
            <div class="col">
              <label for="weekNum">Week:</label>
              <input type="text" class="form-control" id="weekNum" value="4">
            </div>
            <div class="col">
              <label for="date">Date:</label>
              <input type="text" class="form-control" id="date" value="12/31/1969">
            </div>
          </div>
          <div class="form-group">
            <label for="status">Status:</label>
            <input type="text" class="form-control" id="status" value="Planned">
          </div>
          <a href="https://tesla-cdn.thron.com/delivery/public/image/tesla/03e533bf-8b1d-463f-9813-9a597aafb280/bvlatuR/std/4096x2560/M3-Homepage-Desktop-LHD"><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/03e533bf-8b1d-463f-9813-9a597aafb280/bvlatuR/std/4096x2560/M3-Homepage-Desktop-LHD" class="card-img" height="180px"></a>
          <div class="form-group">
            <label for="post">Post:</label>
            <textarea class="form-control" id="post" style="height: 444px;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /
            </textarea>
          </div>
          <div class="form-group">
            <label for="publishedPostLink">Published Link:</label>
            <input type="text" class="form-control" id="publishedPostLink" value="https://posts.gle/nTUL97">
          </div>
          <div class="form-group hidden">
            <label for="postNum">Post Number:</label>
            <input type="text" class="form-control" id="postNum" value="1">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

1. 给原有的.form-group添加.row类，将其转换为栅格行容器
2. 把每个输入框（包含对应label）单独包裹在.col容器中，Bootstrap会自动平分每行宽度
3. 既保留了.form-group的表单样式，又通过栅格系统实现了预期的同行布局

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