引导程序行填充不一致

Question

我有一个包含3列的网格模板，并且该列的第一行被压了几个像素。为此，我需要更改哪些CSS选项？我正在使用引导程序

<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="" required>
  </div>
</div>
<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="">
  </div>
</div>
<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="">
  </div>
</div>

这是CSS

.gridMatchInputs {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Answer 1

如果您要从CSS中删除此行grid-template-columns: 200px 200px 200px;并在要在新行中添加元素时使用.row，我想您就可以实现所需的目标

请参见下面的演示

.gridMatchInputs {
  display: grid;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="gridMatchInputs">
  <!-- Row 1 -->
  <div class="row">
    <!-- column 1 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="1" placeholder="1" required>
    </div>

    <!-- column 2 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="2" placeholder="2">
    </div>
    <!-- column 3 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="3" placeholder="3">
    </div>
  </div>
  
  <!-- row 2 -->
  <div class="row">
    <div class="col-sm">
      <select class="form-control" id="select1">
        <option selected>select1</option>
      </select>
    </div>

    <div class="col-sm">
      <select class="form-control" id="select2">
        <option selected>select2</option>
      </select>
    </div>

    <div class="col-sm">
      <select class="form-control" id="select3">
        <option selected>select3</option>
      </select>
    </div>
  </div>
</div>