Bootstrap 4 float-right 在 .row 内

Posted 2023-03-05

【中文标题】Bootstrap 4 float-right 在 .row 内

【英文标题】：Bootstrap 4 float-right inside .row

【发布时间】：2018-06-24 15:06:06

【问题描述】：

我是 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>

奇怪的是，如果没有该行作为父 div，它可以正常工作，但我想使用该行。我错过了什么吗？

谢谢 :)

【问题讨论】：

已提交 8 个答案。如果可以解决您的问题，请不要忘记接受答案。

【参考方案1】：

如果您只想将列“拉”到右侧，则可以使用“偏移量”。由于您使用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">

【参考方案2】：

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>

如果您想学习 Flexbox 的基础知识，我建议您查看这个快速有趣的教程：http://flexboxfroggy.com/。这是一个很棒的系统，尽管旧版 IE（IE 9 和更早版本）不支持它。

【参考方案3】：

你可以尝试什么：

<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>

如果您使用bootstrap 3，则必须使用pull-right 而不是float-right。

【参考方案4】：

索伦是正确的。 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 是一个 bootstrap 3 标签。

【讨论】：

贤者回答。谢谢。

【参考方案5】：

row 是 bootstrap-4 中的 flex 容器，要对齐 flex-container 中的内容，您需要使用 ml-auto 和 mr-auto。

示例如下：

<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>

这是官方文档链接和示例： https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

对于不使用 flex 容器的情况，您可以使用 float-right，它相当于以前版本中的 pull-right。

还有一个实用程序 Justify Content 可以更改 flex 容器中项目的对齐方式。

【讨论】：

谢谢！ “ml-auto mr-3”是唯一成功将我的内容“浮动”在 div 内、一行内、向右的东西

ml-auto 是向右浮动的最佳做法。谢谢！

以防万一有人在使用引导程序 5 时尝试此操作 -> ml-auto 更改为 ms-auto 和 mr-auto 更改为 me-auto

【参考方案6】：

对于下面带有引导程序的 cshtml 页面

@Html.ActionLink("Back","Index","Controller",null, new @class="btn btn-warning") @Html.ActionLink("新建", "创建", "控制器", null, new @class= "btn btn-primary " )

【参考方案7】：

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>

【参考方案8】：

站在bootstrap documentation 上，您应该在要放在右侧的列上使用ml-auto 类。

通过这种方式（看示例），您可以只在右侧拥有您想要的项目，而所有其他列仍将在自然流中（在左侧）。

<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>

【参考方案9】：

.right-searchbox-content 
     margin-left: auto !important;


.right-searchbox 
    float: right !important;
    display: flex;
    align-items: center;
    justify-content: center;

<div class="row">
<div class="right-searchbox-content">
    <div class="right-searchbox">
        <div class="header">
            <span>my search:</span>
        </div>
        <div>
            <input class="form-control">
        </div>
    </div>
</div>

【参考方案10】：

这段代码 sn-p 帮助我将 Create Account 按钮定位在右侧。

<div class="row justify-content-end">
    <div class="col-md-2">
        <a asp-action="AddAccount" class="btn btn-secondary w-100">
        <i class="fas fa-backward"></i>Create Account</a>
    </div>
</div>