我的问题很简单,但我找不到一个正确的方法(我的意思是不使用相对位置容器内的子元素的绝对位置)来实现Bootstrap 4中的这个.
我有一排col-8和col-4.我在col-4中的内容必须正确对齐,以使其内容位于右边界.
<h1 class="col-md-8">Applications portfolio</h1>
<div class="btn-group col-md-4" role="group">
<p class="float-right">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
这是一个codepen：
https://codepen.io/anon/pen/QpzVgJ
我希望我的两个按钮在col-4中正确对齐.
如何在Bootstrap 4中正确对齐col中的正确元素？
解决方法
使用ml-auto将按钮向右推……
https://codepen.io/anon/pen/evbLQN
<div class="btn-group col-md-4" role="group">
<p class="ml-auto">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
另一种选择是从col-md-4中删除btn-group,然后float-right将按预期工作.在Bootstrap 4中,右移类被float-right替换.
<section class="row">
<h1 class="col-md-8">Applications portfolio</h1>
<div class="col-md-4" role="group">
<p class="float-right">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
</section>
PS – 为防止Codepen中出现水平滚动条,请确保将.row放在容器内.此外,通常col- *用于包含内容,不应该应用于其他组件/元素.所以,例如,如果你想使用btn-group ..
<div class="container-fluid">
<section class="row">
<div class="col-md-8">
<h1>Applications portfolio</h1>
</div>
<div class="col-md-4">
<div class="btn-group float-right mt-2" role="group">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</div>
</div>
</section>
</div>
