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