html - 简单的引导导航栏，不会折叠并且按钮向右

Question

bootstrap 新手，我使用的是 Bootstrap 4 alpha 6，我正在努力设置一个简单的导航栏。我想要左边的布拉德和右边的简单按钮。我查看了文档，但似乎无法解决我的问题。我知道它与 mr-auto 或类似的东西有关。我试过 float-right，但那不起作用。我的按钮就位于左侧品牌下方。这是我的代码....

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

非常感谢任何帮助

Answer 1

尝试使用 Bootstrap 中的辅助类。文档:Bootstrap Responsive floats

<nav class="navbar navbar-light bg-faded">
   <div class="col-sm-12">
      <div class="float-left">
         <a class="navbar-brand" href="#">My Brand</a>
      </div>       
      <div class="float-right">
         <div class="mr-auto">
         <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
         </div>
      </div>
  </div> 
</nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<nav class="navbar navbar-light bg-faded">
   <div class="col-sm-12">
      <div class="float-left">
         <a class="navbar-brand" href="#">My Brand</a>
      </div>       
      <div class="float-right">
         <div class="mr-auto">
         <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
         </div>
      </div>
  </div> 
</nav>