Html Bootstrap 4 在 .row 内浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48272227/
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 float-right inside .row
提问by Zazz Blammymatazz
I'm new to Bootstrap 4 and can't seem to get float-right on a col div working within a row. Here's my code:
我是 Bootstrap 4 的新手，似乎无法在连续工作的 col div 上浮动。这是我的代码：
<div class="row" >
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>
</div>
</div>
Weirdly it works fine without the row as a parent div, but I'd like to use the row. Am I missing something?
奇怪的是，它在没有作为父 div 的行的情况下工作正常，但我想使用该行。我错过了什么吗？
Thanks :)
谢谢 ：）
回答by Jainik
row is a flex container in bootstrap-4, to align content in flex-container you need to use ml-autoand mr-auto.
row 是 bootstrap-4 中的 flex 容器，要对齐 flex-container 中的内容，您需要使用ml-auto和mr-auto。
Here's the example:
这是示例：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row ml-1">
<div>
Hello from left
</div>
<div class="ml-auto mr-3">
Hello from right
</div>
</div>Here's the official docuemtation link and example: https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins
这是官方文档链接和示例：https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins
For cases like when flex container is not being used, you can use float-rightwhich is equivalent of pull-rightin previous versions.
对于不使用 flex 容器的情况，您可以使用与以前版本float-right等效的方法pull-right。
There is also an utility Justify Contentto change alignment of items in flex container.
还有一个实用程序Justify Content来更改 flex 容器中项目的对齐方式。
回答by Soren Baird
Bootstrap 4 has incorporated Flexbox for their layouts. You can get your desired result by adding the class 'justify-content-end' to the parent container.
Bootstrap 4 在其布局中加入了 Flexbox。您可以通过将类“justify-content-end”添加到父容器来获得所需的结果。
<div class="row justify-content-end" >
<div class="col-md-8" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>
</div>
</div>If you want to learn the basics of Flexbox, I recommend checking out this quick and fun tutorial: http://flexboxfroggy.com/. It's a great system, though it is not supported in Legacy IE (IE 9 and earlier).
如果您想学习 Flexbox 的基础知识，我建议您查看这个快速而有趣的教程：http://flexboxfroggy.com/ 。这是一个很棒的系统，尽管它在 Legacy IE（IE 9 及更早版本）中不受支持。
回答by GiuServ
Standing to bootstrap documentationyou should use ml-autoclass on the col you want to be placed on the right.
站在引导文档中，您应该ml-auto在要放置在右侧的列上使用class。
In this way (look at the example) you can have only the item you want on the right, while all the other cols will still be on the natural flow (on the left).
这样（看例子）你只能在右边有你想要的项目，而所有其他列仍然会自然流动（在左边）。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3 border border-primary">
One
</div>
<div class="col-3 border border-primary">
Two
</div>
<div class="col-3 border border-success ml-auto">
Three
</div>
</div>
</div>回答by Henry Nox Richardson
Soren is correct. Bootstrap 4 uses flex box. Floats stuck! Try to forget them!
索伦是对的。Bootstrap 4 使用弹性盒。浮标卡住了！试着忘记他们！
<div class="row justify-content-end">
<div class="col-4"> One of two columns </div>
<div class="col-4"> One of two columns </div>
</div>
Pull-right is a bootstrap 3 tag.
Pull-right 是一个 bootstrap 3 标签。
回答by Sébastien
If all you want is to "pull" the column to the right, you can use an "offset". Since you use col-md-8, add offset-md-4.
如果您只想将列“拉”到右侧，则可以使用“偏移量”。既然你用了col-md-8，就加offset-md-4。
<div class="row">
<div class="col-md-8 offset-md-4" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">回答by Isham Sally
What you could try:
你可以尝试什么：
<div class="row float-right">
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>
</div>
</div>
If you are using bootstrap 3, you will have to use pull-rightinstead of float-right.
如果您正在使用bootstrap 3，则必须使用pull-right而不是float-right。
回答by Siddhartha
For cshtml pages with bootstrap use below
对于下面使用引导程序的 cshtml 页面
@Html.ActionLink("Back","Index","Controller",null, new { @class="btn btn-warning"}) @Html.ActionLink("Create New", "Create", "Controller", null, new { @class = "btn btn-primary " })回答by Sapna Patidar
Bootstrap 4 uses flexbox. You can fix this by replacing 'justify-content-end' instead of 'float-right'.
Bootstrap 4 使用 flexbox。您可以通过替换“justify-content-end”而不是“float-right”来解决此问题。
<div class="row" >
<div class="col-md-8 justify-content-end" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>
</div>
</div>
