英文:
Bootstrap: Navbar Two nav-item should be their after collapsing navbar
问题
我是一个初学者，正在学习制作响应式网站。我在制作 Dropbox 导航栏时需要帮助。对于我的作业（使用HTML、CSS、BOOTSTRAP、Javascript），我试图以响应式的方式制作 Dropbox 网站，以学习所有这些知识。我遇到了三个问题。
1) 在下拉菜单中创建两列并增加其宽度。
2) 使下拉菜单看起来像下面的图片。
3) 在折叠导航栏时，登录和注册应该仍然显示在导航栏上。
图片链接: (https://i.stack.imgur.com/rXRYN.png)
代码中的 Logo: (https://i.stack.imgur.com/ERv7J.png)
希望有人能帮到我。
导航栏的代码如下：
(以下为您提供的代码)
英文:
I am a beginner to learn to make a responsive website.I need a help in making Dropbox navbar.For my Assignment (using HTML,CSS,BOOTSTRAP,Javascript) i was trying to make Dropbox site in a responsive way to learn all those things. I got into threeproblems.
-
Make a Two column in an dropdown-menu and increase it width.
-
make the dropdown look like the below image.
-
When collapsing the navbar Login and signup should still on the NAvbar
The Image : (https://i.stack.imgur.com/rXRYN.png)
Logo in the code : (https://i.stack.imgur.com/ERv7J.png)
Hope someone can help me .
The code of navbar is here.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.png" height="30px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Why Dropbox?
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Solutions
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link " href="#" tabindex="-1" aria-disabled="true">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Contacts
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Get App
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<button type="button" class="btn-primary">Get Started <i class="fa fa-long-arrow-right"></i></button>
</a>
</li>
</ul>
</div>
</div>
</nav>
答案1
得分: 3
以下是您要翻译的内容：
"I hope this would help you. Add the below file to your code
For more please check: https://codepen.io/iamponsiva/pen/QWJMgQE
.w250 {
width: 250px;
}
.navbar-brand {
font-size: 1.4em;
}
.navbar-dark .navbar-nav a.nav-link {
color: #ffffff;
font-size: 1.1em;
}
.dropdown-menu {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border: none;
border-radius: 0;
padding: 0.7em;
}
@media only screen and (min-width: 992px) {
.dropdown:hover .dropdown-menu {
display: flex;
}
.dropdown-menu.show {
display: flex;
}
}
.dropdown-menu ul {
list-style: none;
padding: 0;
}
.dropdown-menu li .dropdown-item {
color: gray;
font-size: 1em;
padding: 0.5em 1em;
}
.dropdown-menu li .dropdown-item:hover {
background-color: #f1f1f1;
}
.dropdown-menu li:first-child a {
font-weight: bold;
font-size: 1.1em;
text-transform: uppercase;
color: #516beb;
}
.dropdown-menu li:first-child a:hover {
background-color: #f1f1f1;
}
@media only screen and (max-width: 992px) {
.dropdown-menu.show {
flex-wrap: wrap;
max-height: 350px;
overflow-y: scroll;
}
}
@media only screen and (min-width: 992px) and (max-width: 1140px) {
.dropdown:hover .dropdown-menu {
width: 40vw;
flex-wrap: wrap;
}
}
.dropdown-menu {
border-radius: 0;
border: none;
padding: 0.5em;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.dropdown-menu ul {
list-style: none;
padding: 0;
}
.dropdown-menu li a {
color: gray;
padding: 0.5em 1em;
}
.dropdown-menu li:first-child a {
font-weight: bold;
font-size: 1.1em;
color: #516beb;
}
@media screen and (min-width: 993px) {
.dropdown:hover .dropdown-menu {
display: flex;
}
.dropdown-menu.show {
display: flex;
}
}
@media screen and (max-width: 992px) {
.dropdown-menu.show {
max-height: 60vh;
overflow-y: scroll;
}
}
<!doctype html>
评论