引導2 - 摺疊響應菜單徽標並在同一行上切換

不幸的是，我被困在這個項目中使用Bootstrap 2。一旦我的導航欄摺疊到「手機」級別，我一直在努力將徽標（.brand）和導航切換到同一行。引導2 - 摺疊響應菜單徽標並在同一行上切換

我試過將.row更改爲.row-fluid，但是.span6元素仍然崩潰，並且一旦降到「手機」尺寸，它就會橫跨導航欄的整個寬度。

這裏的標記我目前有：

<div id="header-row"> 
    <div class="container"> 
     <div class="row-fluid"> 
       <!--LOGO--> 
       <div class="span3"><a class="brand" href="/"><img src="img/logo.png"/></a></div> 
       <!-- /LOGO --> 

      <!-- MAIN NAVIGATION --> 
       <div class="span9"> 
       <div class="navbar pull-right"> 
        <div class="navbar-inner"> 
        <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> 
        <div class="nav-collapse collapse navbar-responsive-collapse"> 
        <ul class="nav"> 
         <li<?php if($current_file == 'index.php') {echo ' class="active"';}?>><a href="/">Home</a></li> 

         <li><a href="/#payback-time">Payback Time</a></li> 
         <li<?php if($current_file == 'funding.php') {echo ' class="active"';}?>><a href="/funding.php">Funding Options</a></li> 
         <li<?php if($current_file == 'supply-and-installation.php') {echo ' class="active"';}?>><a href="/supply-and-installation.php">Supply and Installation</a></li> 
         <li<?php if($current_file == 'contact.php') {echo ' class="active"';}?>><a href="/contact.php">Contact</a></li> 

        </ul> 
        </div> 

        </div> 
       </div> 
       </div> 
      <!-- MAIN NAVIGATION --> 
     </div> 
    </div> 
    </div>

我也有在主題設置一些自定義導航欄的屬性我的工作：

#header-row{ 
    background: #f5f5f5; 
    border-bottom:1px solid #eee; 
    padding: 15px 0; 
} 

#header-row .navbar{margin:10px 0 0 0;} 

#header-row .navbar .navbar-inner{ 
    border:none; 
    box-shadow: none; 
    margin: 0; 
    background: transparent; 
} 

#header-row .navbar .navbar-inner ul.nav > li > a{ 
    box-shadow: none; 
    background: transparent; 
    color: #90c57b; 
} 
#header-row .navbar .navbar-inner ul.nav li.active a{ 
    color: #333; 
}

Live code demo

來源

2016-01-13 James

所有你需要的要做的就是遵循bootsrap navbar結構。現在，您的徽標位於導航欄之外，因此它顯示爲塊元素，導航欄也是如此。以下是如何設置引導程序2導航欄的工作示例。你的CSS應該和它一樣工作，但你可能需要重新設置一些東西，但不確定插入它並嘗試一下。

<div id="header-row"> 
    <div class="container"> 
     <div class="row-fluid"> 
     <nav class="navbar navbar-default"> 
      <div class="navbar-inner"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#"><img src="http://crf.jamesallison.co/img/logo.png" /></a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav pull-right" role="navigation"> 
       <li <?php if($current_file == 'index.php') {echo ' class="active"';}?>><a href="/">Home</a></li> 
       <li><a href="/#payback-time">Payback Time</a></li> 
       <li <?php if($current_file == 'funding.php') {echo ' class="active"';}?>><?php if($current_file == 'funding.php') {echo ' class="active"';}?><a href="/funding.php">Funding Options</a></li> 
       <li <?php if($current_file == 'supply-and-installation.php') {echo ' class="active"';}?>><a href="/supply-and-installation.php">Supply and Installation</a></li> 
       <li <?php if($current_file == 'contact.php') {echo ' class="active"';}?>><a href="/contact.php">Contact</a></li> 
       </ul> 
      </div> 
      </div> 
     </nav> <!-- /navbar-end --> 
    </div> 
    </div> 
</div>

這應保持標誌和在手機屏幕在同一行的菜單漢堡大小

來源

2016-01-13 02:38:17

引導2 - 摺疊響應菜單徽標並在同一行上切換

回答

相關問題