时间戳

首页 > 解决方案 > 调整元素的对齐和大小

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

问题描述

我真的不擅长使用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>

标签： csstwitter-bootstrap

解决方案

在我看来，您正在通过使用不同于 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>

推荐阅读