Question

我是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，它可以正常工作，但我想使用该行。我错过了什么吗？

由于：）

Answer 1

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/。这是一个很棒的系统，但Legacy IE（IE 9及更早版本）不支持它。

Answer 2

row是bootstrap-4中的flex容器，要在flex容器中对齐内容，您需要使用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 可以更改弹性容器中项目的对齐方式。

Answer 3

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

Answer 4

你可以试试：

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

Answer 5

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

Answer 6

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

Answer 7

索伦是对的。 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标签。

Answer 8

Bootstrap 4使用flexbox。您可以通过替换'justify-content-end'而不是'float-right'来解决此问题。

const url = '/something'
cy.get('div.infoTextCarousel')
 .find('a')
 .should($a => {
     let hrefs = $a.map((i, el) => {
      return Cypress.$(el).attr('href')})

      expect(hrefs.get()).to.contain(url)
  })

Answer 9

对于具有引导程序的cshtml页面，请在下面使用

@ Html.ActionLink（“返回”，“索引”，“控制器”，为空，新的{@ class =“ btn btn-warning”}） @ Html.ActionLink（“新建”，“创建”，“控制器”，null，新建{@class =“ btn btn-primary”}）

Bootstrap 4浮在右边.row

9 个答案: