css - 调整元素的对齐方式和大小

Question

我真的很不擅长使用 Bootstrap，而且我一直在为调整大小和对齐而苦苦挣扎。 (我来自打印背景，我习惯于精确定位事物)。

在下面的代码片段中，我如何调整底部 select 元素的大小，使其与上方 select 元素的右边缘右对齐？

---

---

  <form id="date-format-panel" class="mt-3">
    <div class="form-group row">
     <label for="padding-input" class="col-4 col-form-label-sm text-right">Pad timeline start and end dates by</label>
   <input class="form-control col-1" id="padding-input"></input>
     <select class="form-control-sm col-2 ml-1 custom-select" id="padding-format-picker">
       <option value="years">Years</option>
       <option value="months">Months</option>
       <option value="days">Days</option>
       <option value="hours">Hours</option>
       <option value="minutes">Minutes</option>
       <option value="seconds">Seconds</option>
    </select>
  </div>

   <div class="form-group row">
     <label for="date-format-picker" class="offset-1 col-3 col-form-label-sm text-right">Date
       Format:</label>
     <select class="form-control-sm col-3 custom-select" id="date-format-picker">
       <option value="MM/D/YYYY">06/21/2019</option>
       <option value="MM/D/YYYY h a">06/21/2019 1 AM</option>
       <option value="MM/D/YYYY h:mm a">06/21/2019 1:51 AM</option>
       <option value="MM/D/YYYY h:mm:ss a">06/21/2019 1:51:23 AM</option>
     </select>
  </div>
  </form>

---

Answer 1

在我看来，您使用的列值与 Bootstrap 推荐的列值不同，这是在与网格布局作斗争。

下面是一个示例，说明如何使用默认网格值对其进行编码。唯一的区别是元素的间距会发生变化，但是表单将保持响应，并且您的对齐问题将得到解决。我建议检查网格文档。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group row">
    <label for="padding-input" class="col-sm-4 col-form-label text-right">Pad timeline start and end dates by</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" id="padding-input" placeholder=" ">
    </div>
    <div class="col-sm-6">
      <select class="form-control" id="padding-format-picker">
        <option value="years">Years</option>
        <option value="months">Months</option>
        <option value="days">Days</option>
        <option value="hours">Hours</option>
        <option value="minutes">Minutes</option>
        <option value="seconds">Seconds</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <label for="date-format-picker" class="col-sm-4 col-form-label text-right">Date
       Format:</label>
    <div class="col-sm-8">
      <select class="form-control" id="date-format-picker">
        <option value="MM/D/YYYY">06/21/2019</option>
        <option value="MM/D/YYYY h a">06/21/2019 1 AM</option>
        <option value="MM/D/YYYY h:mm a">06/21/2019 1:51 AM</option>
        <option value="MM/D/YYYY h:mm:ss a">06/21/2019 1:51:23 AM</option>
      </select>
    </div>
  </div>
</form>