Bootstrap將導航欄移動到大屏幕上的其他div下

我正在使用bootstrap 3.1.1構建響應頁面，並且我想移動導航欄，以便在非智能手機屏幕上查看時，它位於其他某個div下方。請參閱下面的圖片以獲取示例。Bootstrap將導航欄移動到大屏幕上的其他div下

Intended layout

我已經嘗試這種使用引導拉/推類（見代碼），但我似乎無法得到正確的組合做。它顯示爲我打算用於智能手機，但不是更大的設備。

http://www.bootply.com/118321

HTML

<div class="row"> 
    <div class="col-xs-12 col-sm-push-12"> 
     <div class="navbar navbar-inverse" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Project name</a> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="col-sm-6 col-sm-pull-12"> 
      <h1>First Title Heading</h1> 
     </div> 
     <div class="col-sm-6 col-sm-pull-12"> 
      <h1>Second Title Heading</h1> 
     </div> 
    </div> 
</div>

來源

2014-03-03 ChaoticNadirs

如果你可以修改你的HTML，那麼你也可以包含底部導航（克隆它）。然後 - 只需在需要時隱藏/顯示頂部或底部導航欄。我嚴重懷疑你可以用你目前的標記達到預期的效果。 – skip405

它可以使用jQuery來輕鬆完成。有兩個div s，一個在頂部，另一個在底部。現在，當您的屏幕尺寸較大時，請將導航欄的html設置爲div以上，如果屏幕尺寸較小，則將其設置爲底部。

下面是它會是什麼樣子：

if (screenSize > 1280px) $(#topnav).html('Your navbar HTML here'); 
else $(#bottomnav).html('Your navbar HTML here');

其中topnav和bottomnav是兩個div秒。你現在唯一需要弄清楚的是如何獲得屏幕尺寸。這是如何做到這一點的：

$(window).resize(function(){ 
var screenSize = $(window).width(); 
});

現在只需插入你的HTML，它應該工作。

來源

2014-03-03 14:50:37 Ranveer

這是一個很好的建議。如果可能的話，我寧願使用引導程序網格系統，但除非有人能指出如何工作，否則我會採用JQuery方法。 – ChaoticNadirs

你必須使用'拉'來把你的元素放在左邊和頂部，'推動'把它放在右邊和底部。所以你以錯誤的方式使用這些類。顛倒兩個，它會工作！

來源

2014-03-03 15:23:46 Hornth

Bootstrap將導航欄移動到大屏幕上的其他div下

回答

相關問題