在Bootstrap中，如何使按钮与上面的元素左对齐？

Question

我在这里有一个JSFiddle：

https://jsfiddle.net/sf4wkyx0/

我的“添加”按钮未与文本区域完全对齐：

但是这两个元素前面都带有类col-2的元素，因此我不确定为什么对齐稍有偏离。

如何使“添加”按钮与文本区域完全对齐？

Answer 1

添加按钮部分父级的 pl-0 ，就可以了。

<div class="row col-12 mb-2 pl-0">
  <div class="col-2 spacer"></div>
  <div class="col-10 pl-0 d-inline">
     <button type="button" class="btn btn-sm btn-primary ml-auto"> Add </button>
  </div>
</div>

您可以选中此https://jsfiddle.net/7r0b8voj/

Answer 2

您错误地嵌套了.row个类。只需解决嵌套问题，一切都会很好。

根据Bootstrap's own API documentation，当nesting columns时，任何列.col都应嵌套在.row中。不应将两者结合在一个元素上。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<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">
<div class="modal-body">
  <div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
    <div class="row">
      <label for="duration" class="col-2 pl-0">Description</label>
      <div class="col-10 pl-0 d-inline">
        <textarea class="form-control" rows="2" style="min-width: 100%"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-2 spacer"></div>
      <div class="col-10 pl-0 d-inline">
        <button type="button" class="btn btn-sm btn-primary ml-auto"> Add </button>
      </div>
    </div>
  </div>
</div>