如何在窄視口上製作導航欄全寬？

-1

在移動瀏覽器上，導航欄變爲居中。我希望它能像在更大的視口中一樣分開。因此，徽標將位於左側，菜單圖標位於右側。我該怎麼做呢？是否有內置的課程？如何在窄視口上製作導航欄全寬？

2017-04-24 matt

你能後你有這麼遠的代碼？ – ZimSystem

你只需要添加一個覆蓋標誌和導航容器的移動定位導致某些CSS代碼。

@media only screen and (max-width:640px) { 
#logo {float:left;position:relative;max-width:49%;} 
#navigation_container {float:right;position:relative;max-width:49%;} 
}

你需要在你的具體情況來制定出標記正確的CSS標識符所以這個CSS代碼將工作，以及任何斷點寬度值是有道理的，您的情況。最後提示：在css中爲0123這兩個容器的overflow:hidden將防止該容器的崩潰，以便此標題區後面的內容不會擠佔標題空間。

來源

2017-04-24 22:04:41 phpenthusiast

通過移動視圖在twitter引導網站上查看DOM我將width:100%添加到導航欄container類。看起來像這樣：

@media (max-width: 991px){ 
    .navbar-toggleable-md>.container { 
     padding-right: 0; 
     padding-left: 0; 
     width: 100%; //ADD ME 
    } 
}

這使得Bootstrap文本出現在左邊，手機導航按鈕在右邊。我沒有廣泛測試這個，所以你可能想這樣做。還有一件事要記住的是，版本4仍然處於alpha階段，所以事情可能會發生變化。

來源

2017-04-24 22:05:30 crazymatt

使用navbar-toggler-right的菜單圖標仍然在右側，所以你需要分享您所使用的代碼..

http://www.codeply.com/go/e3G0GCF5zW

來源

2017-04-24 23:29:14 ZimSystem

如何在窄視口上製作導航欄全寬？

回答

相關問題