Html 简单的引导导航栏，不会折叠，右边有按钮

对于bootstrap来说是个新手，我正在使用bootstrap 4 alpha 6，我正在努力设置一个简单的导航栏。我想要左边的brad和右边的一个简单按钮。我看了文档，似乎无法解决我的问题。我知道这和汽车先生或类似的事情有关。我试过正确的浮动，但不起作用。我的按钮就在左边牌子的下面。这是我的密码

 <nav class="navbar navbar-light bg-faded">

  <a class="navbar-brand" href="#">My Brand</a>

    <div class="mr-auto">
      <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
    </div>

</nav>

---

非常感谢您提供的任何帮助

如果您将css与html一起共享，将非常有用。navbar right类将仅将元素浮动到768px宽度以上。如果您想让它在所有屏幕尺寸下都正确浮动，那么请使用float:right的样式

奥托先生{ 浮动：对； }

---

我已经附上了它的工作示例

尝试使用bootstrap中的帮助器类。 文件：

---

这个问题基本上是重复的：

另一个问题是如何使其不塌陷，这是一个使用导航栏切换xl的问题，它可以防止移动设备塌陷导航栏

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
   <a class="navbar-brand mr-auto" href="#">My Brand</a>
   <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
</nav>

---

不要把一个字母放在一个字母里。它不是语义或语法的，它不会像设计的那样工作，它会让未来的代码维护者感到困惑。这里有更多的例子和帮助，可以让你加快速度，然后你可以集中精力迁移到离发行版更近的4版本。只需使用链接的引导CSST，这很好，正是我所做的。一个小问题是导航栏似乎占据了整个页面。解决这个问题的方法是用一个row类将所有内容包装在一个div中。

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
   <a class="navbar-brand mr-auto" href="#">My Brand</a>
   <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
</nav>