如何製作不隨屏幕尺寸變化的導航欄？

這是我的導航欄。我是Bootstrap的新手，它讓我瘋狂。我所需要的只是一個簡單的導航欄，它不會隨屏幕更改而改變其高度，但是水平響應。這個似乎總是改變了768px以下的導航欄高度。如何製作不隨屏幕尺寸變化的導航欄？

<nav class="navbar navbar-fixed-top navbar-default"> 
    <div class="container-fluid"> 
    <a href="{%url 'index'%}" class="navbar-left"><h5>blumury</h5></a> 
    <ul class="nav navbar-nav navbar-right" "> 
     <li><a href="{%url 'index'%}"><i class="material-icons" style="font-size: 16px;">home</i></a></li> 
     <li><a href="#"><i class="material-icons" style="font-size: 16px;">vibration</i></a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="material-icons" style="font-size: 16px;">settings <span class='caret'></i></a> 
     <ul class="dropdown-menu"> 
      <li><a href="{%url 'profile_view' pk=request.user.id%}">Profile</a></li> 
      <li><a href="#">Write Block</a></li> 
      <li><a href="#">Series</a></li> 
      <li class="divider"></li> 
      <li><a href="{%url 'signout'%}">Logout</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</nav>

來源

2017-07-15 Vaish MK

這是你想要做的嗎？ https://codepen.io/anon/pen/BZbgrb –

謝謝！這幾乎是我想要做的。但是我不需要正確的導航項在斷點後摺疊成漢堡包圖標。我已經制作了很小的圖標，以便它們可以繼續水平響應，而不會在小屏幕中崩潰。我不知道該怎麼做。嘗試覆蓋導航崩潰，並正確地浮動導航項目，以便所有內容保持一致。不工作。 –

您應修改CSS代碼，而不是HTML一個，你只顯示上述HTML，它是指引導文件，你通常可以找到他們的

<head> 
<!-- This is a comment --> 
</head>

的內部，你試圖在錯誤的代碼/文件中找到解決方案，嘗試使用以下鏈接添加或更改css：https://www.w3schools.com/css/css_howto.asp

讓我知道如果您有其他問題！

來源

2017-07-15 16:36:40 Nayzen

是的。我想要一種方法來覆蓋Bootstrap的css，這樣我就可以避免Bootstrap在768px處的崩潰斷點。這樣，正確的導航項目仍然可以在小屏幕中看到，而不會摺疊。 –

如何製作不隨屏幕尺寸變化的導航欄？

回答

相關問題