在Bootstrap 4中浮动的样式无效 [英] Style for floating right in Bootstrap 4 doesn't work

问题描述

在此小提琴中，我可以看到搜索框向右浮动，应该是.在我的屏幕上不是.实际上，它的行为就像我将样式设置为 float-xs-left 或只是忽略了浮动相关样式一样.

In this fiddle, I can see that the search box is floated right, as supposed to. On my screen, it's not. In fact, it behaves as if I put the style to be float-xs-left or simply left the floating related styling out.

由于我无法重现该问题，因此不确定如何解决此问题.我已经检查了我系统上可能做的所有事情，但这是一个导航栏，是一个顶级组件，因此几乎没有什么可以搞砸的.

Not sure how to troubleshoot it, since I can't reproduce the problem. I've checked everything I could thing of on my system but it's a navbar, a top level component so there's very little that can be screwed up.

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

之前，我在类 container-fluid 的div中有徽标，它的工作原理如预期(将内容推到右侧).但是，我需要去 row 来

Before, I had the logo in div of class container-fluid and it was working as supposed to (pushing the stuff to the right). However, I needed to go for row for other reasons, hence landing in to this problem.

有人识别不当行为吗?我该怎么做才能进一步调查?

Does anybody recognize the misbehavior? What can I do to investigate further?

推荐答案

问题在于新引导程序的网格系统(基于flex)和徽标所需的float-right的组合.

The problem is with the combination of the new bootstrap's grid system (which is based on flex) and the float-right that you wanted for the logo.

您可以通过使用

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

这篇关于在Bootstrap 4中浮动的样式无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！