CSS Bootstrap 4 在 col div 内对齐元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43146263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 align elements right inside a col div
提问by BlackHoleGalaxy
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.
我的问题很简单，但我没有找到合适的方法（我的意思是不使用相对位置容器内的子元素的绝对定位）在 Bootstrap 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.
我有一排带有 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>
Here is a codepen:
这是一个代码笔：
https://codepen.io/anon/pen/QpzVgJ
https://codepen.io/anon/pen/QpzVgJ
I want my two buttons to right align within the col-4.
我希望我的两个按钮在 col-4 中右对齐。
How in Bootstrap 4 to properly align right elements within a col?
Bootstrap 4 如何在 col 中正确对齐正确的元素？
回答by Zim
Use ml-autoto push the buttons to the right...
使用ml-auto该按钮向右推...
https://codepen.io/anon/pen/evbLQN
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>
Another option is to remove the btn-groupfrom the col-md-4, and then float-rightwill work as expected. The pull-rightclass was replaced by float-rightin Bootstrap 4.
另一种选择是去除btn-group从col-md-4，然后float-right将正常工作。将pull-right类改为float-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 - To prevent the horizontal scrollbar visible in your Codepen, make sure the .rowis placed inside a container-fluid. Also, generallycol-*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..
PS -为了防止水平滚动条在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
http://www.codeply.com/go/8OYDK5D8Db
回答by Johannes
The btn-groupclass in that md-4 makes that DIV a flex container, so a regular text-rightclass for the alignment won't work. Instead, add justify-content: flex-end;in a style attribute to it:
该btn-groupmd-4 中的类使该 DIV 成为一个 flex 容器，因此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
https://codepen.io/anon/pen/RpEYEM
(note: I erased the ptag inside that DIV)
（注意：我删除了p那个 DIV 里面的标签）
回答by Killerpixler
There a couple of issues with the markup provided that makes the layout look odd. @ZimSystem menioned the .container-fluidbut also that you should always have a div.colinside a .rowso that you get the same kind of padding on the edges.
提供的标记存在一些问题，使布局看起来很奇怪。@ZimSystem 提到了.container-fluid但是你应该总是有一个div.col内部 a.row以便你在边缘获得相同类型的填充。
You don't need a <p>around the buttons. To get the alignment simply add .ml-autoto the first button like this:
你不需要<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>
