Bootstrap拉和推在佈局創建混亂

我使用Twitter Bootstrap和卡在列排序。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的引導正確地實現很好的列順序？

來源

2016-10-01 Azamat

網站模板是活在[Teliston.uz（http://teliston.uz/） – Azamat

什麼是小屏幕所需的佈局？ – ZimSystem

@ZimSystem徽標位於Menu頂部的按鈕之上。 – Azamat

調整推，拉和寬的寬度。當您在一個層上使用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

來源

2016-10-01 12:20:43 ZimSystem

Bootstrap拉和推在佈局創建混亂

回答

相關問題