Html 引导程序4在右侧浮动。行

我是Bootstrap4的新手，似乎无法在一行内的col div上获得正确的float。这是我的密码：

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

谢谢 ：）

如果您只想将列“拉”到右侧，可以使用“偏移量”。由于使用了

col-md-8

，因此添加

offset-md-4

五层网格
嗨

Bootstrap 4在其布局中加入了Flexbox。通过将类“justify content end”添加到父容器中，可以获得所需的结果

五层网格
嗨

您可以尝试的内容：

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

五层网格
嗨

---

如果使用的是

bootstrap3

，则必须使用

pull right

而不是

float right

Soren是正确的。Bootstrap4使用FlexBox。浮子卡住了！试着忘记它们

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

两列中的一列
两列中的一列

---

向右拉是一个引导3标签

行是bootstrap-4中的flex容器，要对齐flex容器中的内容，需要使用

ml auto

和

mr auto

下面是一个例子：

你好，从左边来
你好，从右边来

用于下面使用引导的cshtml页面

@ActionLink（“Back”、“Index”、“Controller”、null、new{@class=“btn btn warning”}）

---

@ActionLink（“Create New”、“Create”、“Controller”、null、New{@class=“btn btn primary”}）bootstrap4使用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>

五层网格
嗨

站在右边的列上，您应该使用

ml auto

类

通过这种方式（查看示例），您可以在右侧仅拥有所需的项目，而所有其他Col仍将位于自然流（左侧）

一个
两个
三

。右搜索框内容{
左边距：自动！重要；
}
.右搜索框{
浮子：对！很重要；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
我的搜索：

Sage答案。谢谢，谢谢！“ml auto mr-3”是唯一成功地将我的内容“浮动”到div内、一行内、右侧的东西

ml auto

是向右浮动的最佳实践。非常感谢。提交了8个答案。如果问题解决了，别忘了接受答案。

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