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>

调整元素的大小和大小

1 个答案: