Question

我试图找出如何将按钮对齐到底部。我有一个col-md-3，然后是主要内容col-md-8和一个固定大小的画布。旁边是高度的主要内容。但是旁边的最后一个按钮（我希望它一直在底部。）不能让它工作。有什么东西需要调整以使其工作，因为画布决定高度？

<aside class="col-md-3 bg-light">

      <a href="https://placeholder.com" class="d-flex justify-content-center"><img src="http://via.placeholder.com/100x100"></a>

      <div class="">

        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
        </form>

      </div>

      <div class="align-items-end">
        <div class="mb-3">
          <button type="button" class="btn btn-secondary btn-lg btn-block">Add to cart</button>
        </div>
      </div>

    </aside>

    <!-- Canvas -->
    <div class="col-md-9 bg-secondary d-flex justify-content-center">
      <canvas style="width: 590.6px; height: 826.8px; outline: none; background-color: #fff;" class="mt-5 mb-5"></canvas>
    </div>

Answer 1

将类position-absolute和fixed-bottom添加到按钮应该可以。

您可以使用Bootstrap中的spacing utilites调整边距。

Bootstrap 4对齐表单按钮结束

1 个答案: