Bootstrap：修復導航欄頂部

-4

嘗試了一切，以使導航欄修復到bootstrap的頂部，但沒有任何效果。我已經試過position : relative和position : absolute。任何幫助感謝！Bootstrap：修復導航欄頂部

HTML：

<section style="background-color: #E8E8EA"> 
    <nav class="navbar navbar-fixed-top" style="margin-top: 2vw; margin-right: 3vw; position: fixed;"> 
     <div class="container-fluid"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#" style="border-style: solid; border-width: 1px;"><span class="glyphicon glyphicon-search rt"></span>  Search</a></li> 
      <li><a class="qt" href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>  About Us</span></a></li> 
      <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>  Education</span></a></li> 
      <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>  Consumer Service</span></a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger" style="border-radius: 50%; border-width: 1px; border-style: solid; padding: 5px; margin-top: -5px;"></span></a></li> 
     </ul> 
     </div> 
    </nav> 
</section>

CSS：

.nav.navbar-nav.navbar-right li a { 
color: black; 
background-color: transparent; 
}

編輯：實現這一個頁面滾動的頁面：https://github.com/peachananr/onepage-scroll

來源

2017-08-25 Hritik Gupta

刪除'風格=「的margin-top： 2vw; margin-right：3vw;位置：固定;「'不起作用？」 –

沒有。它沒有 –

檢查https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/。這個證明相同。 –

navbar-fixed-top應做的工作（你的附加聲明position: fixed;是多餘的，應該被刪除）。作爲示例，請參閱使用Bootstrap CSS實現所需功能的網頁：www.alexanderbell.us。對應的逐字HTML：<nav class="navbar navbar-default navbar-fixed-top bg-grey-dark">（bg-grey-dark是一個自定義的類設置背景，可以排除，因爲它對定位無動於衷）。

在一個單獨的說明：更好的做法是避免如在你的情況下，線造型（即style="margin-top: 2vw; margin-right: 3vw; position: fixed;">相反，擴展現有的類.navbar-fixed-top在自定義的CSS文件，或者包括在<head>部分CSS。

希望這有助於。

來源

2017-08-25 12:59:19

重新閱讀代碼，我也試過了！ –

它沒有。但無論如何，謝謝，我已經嘗試了所有這些。 –

好吧，我已經爲您提供了詳細的解決方案/解釋和基於此解決方案的全功能頁面。你有什麼想要達到的目標，以及它與現有的解決方案有什麼不同，有點不清楚。如果您可以爲您的問題增加更多清晰度，那麼可以根據明確的要求對解決方案進行定製。無論如何，祝你的項目好運。最好的rgds， –

不太明白您的完整例子，你想達到什麼目的。

您的代碼已經被固定在上面。也許部分中，您放置導航欄有一些CSS你不會讓你看。

這裏是一個工作示例：

https://jsfiddle.net/L1eczuno/

HTML：

<nav class="navbar navbar-fixed-top" style="margin-top: 2vw; margin-right: 3vw; position: fixed;"> 
    <div class="container-fluid"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" style="border-style: solid; border-width: 1px;"><span class="glyphicon glyphicon-search rt"></span>  Search</a></li> 
     <li><a class="qt" href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>  About Us</span></a></li> 
     <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>  Education</span></a></li> 
     <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>  Consumer Service</span></a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger" style="border-radius: 50%; border-width: 1px; border-style: solid; padding: 5px; margin-top: -5px;"></span></a></li> 
    </ul> 
    </div> 
</nav> 

<div id="test" class="jumbotron" style:"padding-top:30px"> 
    <h1>Twitter Bootstrap 3.0</h1> 
    <p class="lead">Starter template with CSS and JS included.</p> 
    <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p> 
    </div>

CSS：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

body { 
    margin: 10px; 
} 
#test { 
    margin-top: 87px; 
    height: 2000px; 
}

安德烈

來源

2017-08-25 13:22:35 andrescpacheco

這就是爲什麼我提供了一個頁面滾動的github回購鏈接。無法在此處描述整個代碼。我認爲，那裏的CSS可能會造成一些問題，但不知道在哪裏，因爲我也嘗試過調整 –

您提供的示例工作。所以不能幫助你進一步 – andrescpacheco

Bootstrap：修復導航欄頂部

回答

相關問題