引导4对齐元素一个山坳DIV中
我的问题很简单,但我没有找到一个合适的方式(我的意思是不是用相对位置容器内的子元素的绝对positionning)在引导4.引导4对齐元素一个山坳DIV中
实现这一目标我有一排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
我希望我的两个按钮右侧的山坳-4中对齐。
如何在引导4正确对准一处山坳内的元素吗?
使用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
将工作预期。该pull-right
类是在引导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换成float-right
- 为了防止水平滚动条在Codepen可见,确保.row
被放置在container-fluid
内。另外,一般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>
http://www.codeply.com/go/8OYDK5D8Db
的btn-group
类在MD-4,使该DIV柔性容器,所以对齐的常规text-right
类将不起作用。相反,在样式属性添加justify-content: flex-end;
它:
<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;">
https://codepen.io/anon/pen/RpEYEM
(注:我擦除的DIV中的p
标签)
有规定,使一对夫妇与标记的问题布局看起来很奇怪。 @ZimSystem剔除了.container-fluid
,但也应该在.row
的内部始终有一个div.col
,以便在边上获得相同类型的填充。
你不需要周围的按钮的<p>
。要获得对准只需添加.ml-auto
的第一个按钮是这样的:
<div class="container-fluid">
<section class="row mb-2 mt-2">
<h1 class="col-md-8">Applications portfolio</h1>
<div class="btn-group col-md-4" role="group">
<a class="btn btn-secondary btn-md ml-auto" 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>
</section>
<section class="row" style="background-color: grey; height: 50px; overflow:hidden;">
<div class="col">
<p>Just a simple reference block to see the 100% width</p>
</div>
</section>
</div>
请接受对这个问题的答案,让其他人知道它解决了 – ZimSystem