是 <div> Bootstrap Navbar Fixed Top之前可能嗎？

Question

我在HTML上有一個導航欄固定頂部導航。 我正在使用此https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar來使導航“智能”。

現在，我想在實際的navbar-fixed-top之前放一個小<nav> 。 但是，當我將<nav>放在<navbar-fixed-top> ，它出現在實際的navbar-fixed-top 。

我怎樣才能使它出現在navbar-fixed-top ？

JSFiddle： http : //jsfiddle.net/hfx24d8k/

請幫忙。

Answer 1

有兩種方法可以執行此操作，這是一個選擇：

<nav class="navbar" style="position:fixed; top:0px">
    <div class="test">lorem ipsm</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-top" style="top:20px">

這是適用於您的小提琴的修復程序：

http://jsfiddle.net/sifriday/hfx24d8k/1/

在您的小提琴中，.navbar-fixed-top具有position：fixed和top：0px，將其放在屏幕頂部。 因此，首先您需要將其向下移動一點，以便為“ lorem ipsm”留出空間，您可以使用內聯樣式“ top：20px”來完成此操作。

接下來，您需要向上移動lorem ispm。 當前主體上有60px的填充，因此最簡單的向上移動方法是固定第二個導航，並將其移動到主導航上方，並使用內嵌樣式“ position：fixed; top：0px”

或者，您可以從正文中刪除填充，然后讓瀏覽器將其放在屏幕頂部。 .navbar類應用position：relative，因此您需要通過在lorem ispm nav上設置position：static來覆蓋它。

Answer 2

像這樣

 <nav style=" 
      position: fixed;
      width: 100%;
      top: 0%;
      background-color:red;">
        <div class="test">lorem ipsm</div>
 </nav>

小提琴http://jsfiddle.net/hfx24d8k/4/