css - 如何将按钮对齐到页面底部

Question

我想将所有按钮对齐到页面底部:

带代码的编辑器:

https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed

<div class="container-fluid py-2">
  <div class="row">
    <div class="col-md-12 mx-auto">
      <div class="card rounded-0">
        <div class="card-header">
          <h2>Boot Container View</h2>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="ws-details" style="background:gray; height:100px">
                Element1
              </div>
              <div
                class="order-details"
                style="background:lightgray; height:200px"
              >
                Element 2
              </div>
            </div>
            <div class="col-md-6">
              <div style="background:gray; height:305px">Element3</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="center-block">
                <div class="btn-group-vertical">
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 1a
                    </button>
                  </p>
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 2a
                    </button>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="center-block">
                <div class="btn-group-vertical">
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 1b
                    </button>
                  </p>
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 2b
                    </button>
                  </p>

                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 3b
                    </button>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="center-block">
                <div class="btn-group-vertical">
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 1c
                    </button>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我尝试使用父/子元素的绝对位置和相对位置。但我仍然无法正确对齐按钮。另外 - 我想更改大小(按钮的宽度)，并且在更改样式宽度后中心按钮出现问题。

Answer 1

---

app.component.html 的变化文件:

---

在您的 html 文件中的第 25 行更改 <div class="row">至 <div class="row position-relative"> .

第27行和第65行改<div class="center-block">至 <div class="center-block align-to-bottom">

---

app.component.css 的变化文件:

---

添加:

@media only screen and (min-width: 767px) {
  .align-to-bottom {
    bottom: 0;
    position: absolute;
  }
}

---

编辑链接:https://codesandbox.io/s/angular-7-bootstrap-4-u5uet

---

要更改按钮的宽度，您可以添加 button.btn-info {width: 150px;}到你的CSS。你当时说中间按钮有问题，但你是什么意思？