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

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

编辑器的代码:

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>


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

最佳答案

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 - 如何将按钮对齐到页面底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57407893/

10-11 23:07
查看更多