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

Question

我想右边是品牌，左边是导航。它适用于大屏幕，但在折叠时品牌会向左移动，"burger button" 向右移动。我想反之亦然（菜单总是在左边，品牌总是在右边）。我现在唯一的想法是让它超过自定义 css，但如果可能的话，我想让它超过 bootstrap 类。

<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

你可以尝试 bootstrap 类: 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 是否是您想要的。

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

How to let brand stay on the right on collapse in bootstrap 3

css

toggle

collapse

twitter-bootstrap-3