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

【问题标题】：Bootstrap pull and push create mess in layoutBootstrap 拉和推在布局中造成混乱
【发布时间】：2016-10-01 10:45:09
【问题描述】：

我正在使用 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 来实现良好的列排序？

【问题讨论】：

网站模板上线Teliston.uz
小屏幕的理想布局是什么？
@ZimSystem 徽标位于菜单顶部的按钮顶部。

标签： twitter-bootstrap multiple-columns

【解决方案1】：

调整 push、pull 和 col 的宽度。当您在一个层上使用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

【讨论】：