右側的子菜單很容易在導航欄中實現,但最小化屏幕時如何使子菜單在左側自動打開?如何在瀏覽器最小化時在右側和左側製作導航欄的子菜單
0
A
回答
0
@media screen and (min-width: 500px) {
.submenu {
/*This and this style when window-width is greater than 500px*/
}
}
@media screen and (max-width: 500px) {
.submenu {
/*This and this style when window-width is less than 500px*/
}
}
請添加您當前的樣式和html代碼以獲取更詳細的答案。
0
嘗試這樣:
nav li {
float: right;
}
/*The max width the that the screen has to be for this rule to apply*/
@media only screen and (max-width: 900px) {
nav li {
float: left;
}
}
1
給你:
@media screen and (min-width: 768px) {
#mainmenu{
float: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" align="right">
<ul id="mainmenu" class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle navbar-right" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
相關問題
- 1. 如何製作左側導航菜單
- 2. 如何製作左側的導航抽屜和右側的菜單圖標?
- 3. 如何修改導航欄上的左側和右側項目
- 4. 移動導航菜單的左側和右側
- 5. Bootstrap導航欄的右側和左側的菜單圖標旁邊的元素
- 6. 右側的菜單和左側的半透明導航欄上的Logo
- 7. jquery左側導航菜單
- 8. 離子框架:左側和右側sidemenus在導航上消失
- 9. 導航欄左側
- 10. Bootstrap導航欄中的白色右側和左側頁邊距
- 11. 帶有左側徽標和右側徽標的Bootstrap導航欄
- 12. 如何使子菜單出現在左側,而不是右側
- 13. 右側菜單在Swift中單擊時打開左側菜單
- 14. 右側和左側菜單CSS?
- 15. 側欄導航菜單
- 16. 標題,導航欄和左側菜單一起 - 離子
- 17. VS代碼瀏覽器側欄導航
- 18. Ionic2左側和右側圖標導航欄
- 19. 左側和右側的導航欄和右側的圖標:右側的圖標被下推
- 20. 從導航欄左右欄縮小左側空間和右側空間欄按鈕項
- 21. 如何製作標題左側的徽標和右側的導航?
- 22. 當瀏覽器越來越小時,我如何將右側欄位移動到左側欄的中間
- 23. 左側的Android導航欄
- 24. 如何更改子菜單側出現在左側而不是右側
- 25. CSS:如何在內容的左側和右側製作背景
- 26. divs在左側和右側
- 27. 如何使自定義關閉/最小化/最大化菜單停靠在右側/左側窗口10屏幕
- 28. 如何將Bootstrap中的導航欄菜單浮動到右側?
- 29. 你如何讓左側的菜單保持在右側滾動
- 30. 使用bootstraps創建的導航欄在左側和右側有空白區域
你可以使用CSS媒體查詢 –
可以請你分享我的代碼爲! – User3003
請你可以在這裏給你的代碼。 – user7357089