Bootstrap 拉和推在布局中造成混乱

Question

我正在使用 Twitter Bootstrap 并卡在列排序上。

这是我现在针对 md 和 lg 屏幕尺寸的布局：Logo | Buttons | Menu。

这是我想要实现的布局：Logo | Menu | Buttons（对按钮使用推，对菜单使用拉）。

这是我正在使用的代码，但布局很乱：

<div class="row main-menu-row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 logo">
      <img class="logo-img" src="img/logo.png" />
    </div>
    <div class="col-lg-push-3 col-md-2 col-sm-9 button-menu">
      <div class="btn-group btn-group-justified numbutgr">
        <a href="#" class="btn addnumbut"><span class="glyphicon glyphicon-earphone"></span></a>
        <a href="#" class="btn seanumbut"><span class="glyphicon glyphicon-search seanumico"></span></a>
      </div>
    </div>
    <div class="col-lg-pull-6 col-md-7 col-sm-12 col-xs-9 menu-links">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Главная <span class="sr-only">(current)</span></a></li>
              <li><a href="#"><span class="glyphicon glyphicon-book"></span>Каталог</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-bullhorn"></span>Блог</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>О нас</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-phone-alt"></span>Контакты</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    </div>
  </div>

如何在 Twitter Bootstrap 中正确使用 pull 和 push 来实现良好的列排序？

Answer 1

调整推、拉和列宽度。当您在一个层上使用 push 或 pull 时，您还必须为其他层指定它。

<div class="row main-menu-row">
        <div class="col-lg-3 col-md-3 col-sm-3 logo">
            <img class="logo-img" src="//placehold.it/150x30">
        </div>
        <div class="col-lg-push-6 col-lg-3 col-md-2 col-md-push-7 col-sm-9 col-sm-push-0 button-menu">
            buttons
        </div>
        <div class="col-lg-pull-3 col-lg-6 col-md-7 col-md-pull-2 col-sm-12 col-sm-pull-0 menu-links">
            menu
        </div>
    </div>

http://www.codeply.com/go/FdmE6lyyhT

Bootstrap 拉和推在布局中造成混乱

Bootstrap pull and push create mess in layout

multiple-columns

twitter-bootstrap