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

Posted 2023-02-25

【中文标题】如何将按钮与页面底部对齐

【英文标题】：How to align buttons to bottom on the page

【发布时间】：2019-08-08 08:02:15

【问题描述】：

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

带有代码的编辑器：

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>

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

【问题讨论】：

您是否已经尝试将align-bottom 添加到要在底部对齐的按钮中，如 bootstrap-4 文档中所述？ getbootstrap.com/docs/4.3/utilities/vertical-align

【参考方案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。你刚才说中心按钮有问题，但你的意思是什么问题？

【讨论】：

谢谢 - 更好。但是你能检查一下编辑器的链接吗？现在 - 当我将大小更改为小时，按钮位于元素 3 中。页面上的所有中心按钮也有问题。

@profiler 我改变了我的答案，这应该可以解决问题。我添加了一个媒体查询并更改了您必须在第 27 行和第 65 行编辑的内容。还更改了您必须添加的 css 代码。

谢谢！完美的解决方案。

按钮1c向右对齐有解决办法吗？

【参考方案2】：

使用这个 css 属性：

bottom:0
position:absolute

【参考方案3】：

您似乎正在为这段代码使用引导程序，因此如果您需要将按钮与底部对齐，您可以使用自定义 css。让这个 css 类为 alignBottom。

.alignBottom
     position: absolute;
     bottom: 0px;

【讨论】：

什么时候应该添加 alignBottom？我将它添加到行中...在中心块中...在按钮中。无处可做。