Bootstrap 4在col div内部对齐元素 [英] Bootstrap 4 align elements right inside a col div
问题描述
我的问题很简单,但是我没有找到合适的方法(我的意思是不在相对位置容器内使用子元素的绝对定位)在Bootstrap 4中实现这一目标.
My question is pretty simple but I don't find a proper way (I mean not use absolute positionning of sub elements inside a relative position container) to achieve this in Bootstrap 4.
我有一排带有col-8和col-4的行.我在col-4中的内容必须右对齐,以便其内容在右边界.
I have a row with a col-8 and a col-4. My content in col-4 must be right aligned so its content is at the right border.
<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:
Here is a codepen:
https://codepen.io/anon/pen/QpzVgJ
我希望我的两个按钮在col-4内正确对齐.
I want my two buttons to right align within the col-4.
如何在Bootstrap 4中正确对齐列中的正确元素?
推荐答案
使用 ml-auto
将按钮向右推...
Use ml-auto
to push the buttons to the right...
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中的pull-right
类已由 float-right
替换.
Another option is to remove the btn-group
from the col-md-4
, and then float-right
will work as expected. The pull-right
class was replaced by float-right
in Bootstrap 4.
<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
放在container-fluid
内部.另外,通常 col-*
用于包含内容,并且不应应用于其他组件/元素.因此,例如,如果您想使用btn-group
..
PS - To prevent the horizontal scrollbar visible in your Codepen, make sure the .row
is placed inside a container-fluid
. Also, generally col-*
are used to contain content, and shouldn't be applied to other components/elements. So, for example if you wanted to use the 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>
http://www.codeply.com/go/8OYDK5D8Db
这篇关于Bootstrap 4在col div内部对齐元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!