bootstrap導航欄不保留頂部和寬度

由於某些原因，導航欄不保留在頁面頂部。換句話說，它的可玩性。
繼承人我的代碼：bootstrap導航欄不保留頂部和寬度

<div class="navbar-wrapper"> 
    <div class="container"> 

     <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        @Html.ActionLink("The Secured Password", "Index", "Home", null, new { @class = "navbar-brand" }) 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li>@Html.ActionLink("Home", "Index", "Home")</li> 
         <li>@Html.ActionLink("About", "About", "Home")</li> 
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
        </ul> 
        @Html.Partial("_LoginPartial") 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

任何原因確實是什麼？此外，由於我使用了navbar-inverse，導航欄有一個黑色背景。但是，它並不適合屏幕。我怎樣才能確保它適合整個屏幕？謝謝。

來源

2014-04-02 TitanTheYaphet

你們是不是要把它固定在頂部？如在滾動頁面時，您希望它始終保持在那裏並始終可見？ – Oneezy

是的。我相信這是自舉的自然行爲，但由於某種原因，我無法讓它工作。 – TitanTheYaphet

我不確定這是否是引導程序的正確行爲（我從來沒有使用它），但你可以得到這些東西行爲就像你想要的。

http://jsfiddle.net/F7XH8/

.navbar-wrapper { background: black; position: fixed; top: 0; right: 0; left: 0; width: 100%; color: white; } 
    .main { margin: 10em 0; }

我說「主要」，使其具有內容的滾動。

來源

2014-04-02 03:17:16 Oneezy

謝謝。我只是意識到bootstrap沒有工作的原因是因爲我用一個包裝來包裝它，而我並沒有明確包裝的位置。在後續問題上，現在它可以工作，但是當我滑雪時，內容會出現並覆蓋導航欄。如何將導航欄始終放在頁面的頂部，並始終放在內容的頂部？ – TitanTheYaphet

就bootstrap而言，我不知道 - 但是，您正在尋找名爲「z-index」的東西。它的工作方式：確保您的導航具有更高的z-index，然後您的內容，並將您的內容設置爲「position：relative」。所以要手動執行此操作，您應該說「nav {z-index：100; ...位置：固定;其他代碼...} .content {position：relative; z-index：50;} – Oneezy

@TitanTheYaphet你有沒有嘗試過使用Bootstrap的本地功能，因爲我在我的答案中提到（http://stackoverflow.com/a/22800959/908491）？使用其原生功能將確保您的解決方案與Bootstrap的其餘功能良好地配合。 –

添加.navbar-fixed-top幷包括一個.container或.container-fluid以居中並填充導航欄內容。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    ... 
    </div> 
</nav>

從引導文件：http://getbootstrap.com/components/#navbar-fixed-top

來源

2014-04-02 03:25:55

以上是Bootstrap v3.1.1。如果您使用的是v2.3.2，請轉至此處：http：// getbootstrap。 com/2.3.2/components.html＃navbar，然後向下滾動到「Fixed to top」。顯然，對於舊版本，您只需添加'.navbar-fixed-top'。 –

bootstrap導航欄不保留頂部和寬度

回答

相關問題