bootstrap 4中的pull-right替换不起作用答案

【问题标题】：pull-right replacement in bootstrap 4 does not workbootstrap 4中的pull-right替换不起作用
【发布时间】：2018-02-14 01:03:32
【问题描述】：

我有 read pull-right 类已被删除取而代之的是 .float-{sm,md,lg,xl}-{left,right,none} 之类的类 - 也可以在 this question 中看到。

但我无法让它工作。我已经在 https://jsfiddle.net/kneidels/x8Lhmajc/1/ 您将在左上角看到“菜单”一词，并附有一个下拉菜单。应该是向右浮动的但你可以看到它不起作用。

【问题讨论】：

【解决方案1】：

我设法使它与您的情况一起使用 col 和 float-right 类。这是plunker 和您的fiddle。但通常，只需向右浮动就足够了。

 <div class="col float-right">                
     <div class="dropdown actionButtons float-right">
     //your content
   </div>
</div>

如果您只需要移动菜单，请包装 col-sm-12(md, lg what you need) 并在示例中使用 float-right（请参阅此fiddle)。

 <div class="col-md-12"> </div>

【讨论】：

谢谢 - 但我需要在 far 右侧的菜单图标 - 在所有其他列之后。即使我使用col-sm-12 float-right 而不是你的col float right - 我确实在最右边得到了它，但是所有其他col-* 元素然后会中断到下一行。也许我可以用一些负边距来解决这个问题，但这听起来仍然像是一种变通方法，而不是一个干净的解决方案。你有什么建议？
这取决于您的下一个 col-sm- 值。例如，如果它的 col-sm-10 使用的不是 col-sm-12 而是 col-sm-2。 12-10 = 2
如果你使用 col-sm-12 它将占用整行。但如果你少用它，就让它排成一行
例如 col-sm-12 和 col-sm-12 将是 2 行。但是 col-sm-6 和 col-sm-6 将是一行
明白，谢谢。我在 12 点之前犯了一个错误 :) 但这就是我现在所拥有的：jsfiddle.net/kneidels/x8Lhmajc/4 - 仍然没有浮动。

【解决方案2】：

可能有点晚了，但我也遇到了困难。每当我设法将列放在“行”类下时，没有什么能让我正确。我想这可行，这是我的解决方案；

<div class="row">
   <div class="col order-last">
      Whatever
   </div>
</div>

【讨论】：

【解决方案3】：

.row div 现在位于display:flex，这就是浮动无法正常工作的原因！你可以

1) 将内容包装在<div class="col-sm-12></div> 中（这是使用网格的正确方法：如果您不使用.col-something，您最终会得到负边距并且您的部分内容不可见）

2) 使用https://getbootstrap.com/docs/4.0/utilities/flex/ 此处列出的 flex 实用程序之一，例如 flex-row-reverse 类

【讨论】：

谢谢！问题：供您选择(1) - 您的意思是将menu 项包装在<div class="col-sm-12></div> 中吗？像这样：jsfiddle.net/kneidels/x8Lhmajc/3。关于你的选项(2)，我的问题是现有的颜色顺序很好，我只需要菜单元素在最右边
您的 jsfiddle 似乎是正确的。您必须始终在 .row 内使用 .col-something，因为后者的边距为负（用于网格构造）
jsfiddle.net/kneidels/x8Lhmajc/6 是更新的。问题在于，菜单位于其自己的行中 - 而它应该是列结构的一部分
你正在尝试做这样的事情吗？ codepen.io/erredeco/pen/aLdwpG我不知道你在做什么，但在我看来你试图显示的数据可以用表格更好地显示