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

问题描述

我想将所有按钮与页面底部对齐：

带有代码的编辑器：

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>

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

标签： cssbuttonbootstrap-4

文件变化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。你说然后中心按钮有问题，但你的意思是什么问题？

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

问题描述

解决方案

推荐阅读