我想将所有按钮对齐到页面底部:
带代码的编辑器:
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/