帶有 CSS 的響應式導航欄
[英]Responsive Navbar with CSS
問題描述
我正在嘗試使用媒體查詢使我的導航欄以 500px 寬度響應而不使用漢堡標志。 當屏幕縮小到 500 像素以下時，我想讓包含鏈接的“菜單”div 直接在具有“公司名稱”的那一行下方換成新行。 這里有人可以幫忙嗎？
#nav-bar { display: flex; justify-content: space-between; padding-left: 10px; background-color: #38b000; color: #FFFFFF } .company-name { font-size: 32px; flex: 1; } .menu { display: flex; justify-content: space-evenly; flex: 1; max-width: 20%; font-size: 18px; align-items: center; }
<nav id="nav-bar"> <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2> <div class="menu"> <a href="" class="nav-link" href="/">Login</a> <a href="" class="nav-link" href="/">Logout</a> <a href="" class="nav-link" href="/">Profile</a> </div> </nav>
4 個解決方案
解決方案1
0 2022-06-19 19:41:55
您需要在最后一個 css 文件中添加此媒體：
@media (max-width: 500px) {
#nav-bar {
flex-direction: column;
}
.menu {
max-width: 35%;
}
}
解決方案2
0 2022-06-19 20:14:13
如果瀏覽器的大小低於 1700x，它會將其 flex-direction 更改為 column 並將高度更改為 auto，則可以通過將所需大小的 max-with 定位為示例中所示的媒體查詢來實現這一點。
* { font-size: 40px; margin: 0; padding: 0; } .navbar-nav { display: flex; justify-content: center; align-items: center; height: 2rem; background-color: gray; } .nav-links { list-style: none; padding: 0.5rem; font-family: Arial, Helvetica, sans-serif } @media only screen and (max-width: 1700px) { .navbar-nav { height: auto; flex-direction: column; background-color: gray; } }
<body> <nav class="navbar"> <ul class="navbar-nav"> <li class="nav-links">Home</li> <li class="nav-links">About</li> <li class="nav-links">Services</li> <li class="nav-links">Email</li> <li class="nav-links">Something</li> <li class="nav-links">SignUp</li> <li class="nav-links">Login</li> <li class="nav-links">Loremips</li> </ul> </nav>
解決方案3
0 2022-06-19 20:17:11
這似乎符合您的要求，盡管問題中的更多信息總是有用的； 該代碼在代碼中的注釋中進行了解釋：
/* custom CSS property: */ :root { --flex-direction-nav: row; } /* simple, naive CSS reset to minimise cross-browser issues by specifying the box-sizing algorithm, and removing margin and padding from elements: */ *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } body { /* setting the font-size of the <body> to allow other font-sizes to be assigned based on the em (this is my preference, feel free to adjust to your own preferences): */ font-size: 16px; } #nav-bar { display: flex; /* specifying the flex-direction to the value held in the custom CSS property-value: */ flex-direction: var(--flex-direction-nav); /* assigning 'left over' space to be placed between the elements, not before, after and between: */ justify-content: space-between; /* balancing the padding so the menu-bar looks well-proportioned and 'balanced': */ padding-inline: 10px; background-color: #38b000; color: #FFFFFF; } .company-name { /* 1em is 16px, 2em is 32px: */ font-size: 2em; /* you had assigned a max-width of 20% to the .menu element; here I specified that the .company-name element should be four times larger than that '20%' element, which preserves the 20% while there is space but otherwise allows all elements to take the required space: */ flex-grow: 4; } .menu { display: flex; flex-direction: row; flex-grow: 1; font-size: 1.05em; gap: 1em; /* assigning 'left over' space to be placed between the elements: */ justify-content: space-between; align-items: center; } /* in screen media, when the max-width is 500px (or less): */ @media screen and (max-width: 500px) { /* we redefine the custom CSS property, which is automatically applied once it's changed: */ :root { --flex-direction-nav: column; } }
<nav id="nav-bar"> <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2> <div class="menu"> <a class="nav-link" href="#">Login</a> <a lass="nav-link" href="#">Logout</a> <a class="nav-link" href="#">Profile</a> </div> </nav>
參考：
-
box-sizing。 - CSS 自定義屬性 (
--*) 。 -
display。 -
flex-direction。 -
justify-content。 -
margin-inline。 -
padding-inline。 -
@media。 -
var()。
解決方案4
0 2022-06-19 23:59:39
簡單的解決方案就是輸入flex-direction: column; 在特定的寬度。 然后只需一點 CSS 操作就可以讓它變得更好。
Bootstrap響應式CSS導航欄不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.