css - 如何让品牌在 bootstrap 3 崩溃时保持在右侧

Question

我想要一个品牌在右边，导航在左边。它适用于大屏幕，但在折叠时品牌会向左移动，“汉堡按钮”向右移动。我想反之亦然(菜单总是在左边，品牌总是在右边)。我现在唯一的想法是通过自定义 css 实现它，但如果可能的话，我希望通过引导类实现它。

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <a href="#" class="navbar-brand navbar-right">
        <img src="logo.jpg" />
      </a>
      <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
            </button>     
      </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
              <li ><a class="main_nav_link" href="#">Link 1</a></li>
              <li ><a class="main_nav_link" href="#">Link 2</a></li>
              <li ><a class="main_nav_link" href="#">Link 3</a></li>
              </li>
            </ul>
    </div>
  </div>
</nav>

Answer 1

您可以尝试引导类: pull-left and pull-right

<a href="#" class="navbar-brand navbar-right pull-right">

和

<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="navbar-collapse">

检查是否this fiddle是你想要的。