Bootstrap 4中右浮动样式无法生效

Question

在这个 JSFiddle 里面，我可以看到搜索框向右浮动，就像预期的那样。但是在我的屏幕上它没有向右浮动，实际上它的行为就像我将样式设置为float-xs-left或者只是将与浮动相关的样式省略掉一样。 我不确定如何进行故障排除，因为我无法重现这个问题。我已经检查了我系统上的所有可能性，但这只是一个导航栏，是一个顶级组件，所以几乎没有什么可以弄糟的。

<form class="form-inline float-xs-right">
  <input class="form-control" type="text" placeholder="Stuff">
  <button class="btn btn-default" type="button">Click</button>
</form>

之前，我的logo在类为container-fluid的

标签中，它可以像预期的那样工作（将内容向右推）。然而，由于其他原因，我需要使用row标签，从而遇到了这个问题。

有人认识这种异常吗？我该如何进一步调查？

- Konrad Viltersten

---

@Dekel IE，FF和Cr。除了导航栏之外，这与网站有关。因为在fiddle上它可以工作。我只是困在了更多的调查上，并希望得到一些有见地的东西。 :) - Konrad Viltersten

有没有可能给个网站链接？ - Dekel

你的HTML代码是否以 <nav 元素开头？ - Dekel

@Dekel，其实我现在就要开始做了。我发现菜单还有另一件事情让我卡住了，让我忘记了这个问题。谢谢你提醒我。我正在同时处理几个问题，今天会解决所有的事情。我会在15分钟内回复您。必须承认，你真的很敏捷。 - Konrad Viltersten

顺便说一句，如果您没有选择我提供的解决方案，看到最终的解决方案也是不错的。 - Dekel

Answer 1

问题出在新版Bootstrap的网格系统（基于flex）和您想要为标志使用的float-right组合上。

您可以通过使用以下方法来解决这个问题：

.navbar .row .form-inline.float-xs-right {
    position: absolute;
    right: 0;
}

- Dekel

---

我所能看到这种方法的唯一缺点是，其他元素被放置在其他元素（因为定位被我们的自定义类杀死了，而Bootstrap保留了边距，不考虑绝对定位的元素）。在我看来，问题出在边距吞噬标志的方式上。当我将其向左推时，仍然希望完整地看到它。祝你圣诞快乐或节日快乐，这取决于你的宗教倾向。如果你在斯德哥尔摩，请让我请你吃披萨。 - Konrad Viltersten

在以色列，哈努卡节快乐 :) 谢谢！我同意那个评论。我没有去斯德哥尔摩的计划，但会记在心里，等到我去了再更新你 :) - Dekel

最终的解决方案是声明一个针对特定ID的类，并应用您所说的内容（除了right: 10px，因为我需要一些边距）。这似乎对Booty的影响最小。 - Konrad Viltersten

太好了，知道了 :) 谢谢分享！ - Dekel