2016-04-25 44 views
1

對於B3,頂級導航欄有大量模板,並帶有下拉菜單。隨着屏幕尺寸變小,菜單摺疊成3條按鈕,菜單變成手風琴菜單。Bootstrap 4 navbar,帶有下拉菜單和響應模板?

是否有任何示例或模板使用Bootstrap 4執行此操作?我已經找到的響應例子已經找到摺疊菜單,並顯示3條按鈕,但菜單不成爲手風琴菜單。 BS4也有很多下拉式的例子,但不是響應式的。

當屏幕變小並顯示帶有所有相同選項的手風琴時,我是否必須隱藏整個導航欄?這似乎比BS3更多的工作。

+0

關於導航欄下拉菜單和對齊的導航欄項目,還請閱讀[Bootstrap 4的響應式導航欄](http://bassjobsen.weblogs.fm/bootstrap-4s-responsive-navbars/)[ ]。有關導航欄下拉菜單的示例,另請參閱https://github.com/bassjobsen/responsive-navbar-dropdowns。 –

回答

1

我對這個解決方案將是一個簡單的媒體查詢添加到目標在導航被摺疊屏幕尺寸自定義CSS,然後風格你的元素,你喜歡的任何方式:

@media (max-width: 544px) { 
    .navbar-brand { 
    display:none; 
    } 
    .navbar-nav .nav-item { 
    float:none; 
    } 
    .navbar-nav .nav-item + .nav-item{ 
    margin-left:0; 
    } 
} 

這裏有一個simple example on CodePen 。不是很複雜,但它應該說明這一點。