Question

我正在使用Twitter Bootstrap并坚持列排序。

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

这就是我想要实现的布局：Logo | Menu | Buttons（使用push按钮，然后拉动菜单）。

这是我正在使用的代码并且布局变得混乱：

<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 pull and push在布局中造成混乱

1 个答案: