引導4 - 在使用移動設備

努力學習網站佈局創建導航菜單問題上的最新bootstrap 4 alpha 4（與jQuery 3 conjustion），並在這個問題上我也想涵蓋1個問題，我所遇到的那麼遠。引導4 - 在使用移動設備

當我點擊導航欄「摺疊模式」中的「菜單」按鈕 - 下拉列表在中心落下，然後移到左側。這看起來很糟糕。問題解釋說：

爲什麼會出現這種情況？我如何強制列表，從右側，而不是總是下拉（和動畫後留在那裏）？

這裏是小提琴：http://jsfiddle.net/Wy22s/1073/

編輯：在接受的解決方案，沒有右對齊。注意，在提琴有用於導航欄pull-xs-right類，但它並沒有踢在：

http://jsfiddle.net/Wy22s/1075/

所以我說幹就幹，通過導航欄前添加clearfix div做了我自己的解決方案：

<a class="navbar-brand" href="#">Website</a> <div class="clearfix hidden-sm-up"></div> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar1">  <div class="nav navbar-nav pull-xs-right"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link" href="#">About</a> </div> </div>

所以最後我使用這個方法（無需CSS變化）：

http://jsfiddle.net/Wy22s/1077/

來源

2016-09-30 Alex

請縮小這個和澄清。它可能需要單獨的問題。 – ZimSystem

@ZimSystem點了。刪除了問題2,3和4.現在它只是一個 - 最重要的。 – Alex

是和否:)我標記你的答案是正確的，但沒有正確的排列正如我的問題要求..但我設法解決它不同。看看我的最新情況。 – Alex

這個問題已經基本被在這裏找到答案： Bootstrap 4 responsive navbar vertical

在引導4，導航欄沒有按垂直堆棧默認情況下，所以你必須添加一些CSS，使其像Bootstrap 3.x工作..

@media(max-width:544px) { 
    .navbar .navbar-nav>.nav-item { 
     float: none; 
     margin-left: .1rem; 
    } 
    .navbar .navbar-nav { 
     float:none !important; 
    } 
    .navbar .collapse.in, .navbar .collapsing { 
     clear:both; 
    } 
}

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

UPDATE：額外CSS不再需要自舉4阿爾法6由於導航欄將垂直堆疊：http://www.codeply.com/go/cCZz5CsMcD

來源

2016-10-03 16:22:23 ZimSystem

引導4 - 在使用移動設備

回答

相關問題