html - Bootstrap 导航栏没有响应
问题描述
第一次使用 Bootstrap 设计网站并遇到菜单问题。我已经查看了该网站在不同设备上的外观,一旦达到 800 x 600,顶部的菜单就不会堆叠在顶部。我附上了 3 张图片,其中只有第一张看起来正确的图片。我还在我在另一篇文章中看到的头标签中包含了视口初始比例=1...
请有人指出我正确的方向来纠正代码吗?
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand text-left" href="index.html">iStudy University <i class="fas fa-graduation-cap"></i></a>
<div class="navbar-nav ml-auto">
<a id="menu-nav" class="nav-item nav-link px-3" href="index.html"><i class="fas fa-home" ></i> Home</a>
<a id="menu-nav" class="nav-item nav-link px-3" href="#"><i class="fas fa-info-circle"></i> About</a>
<a id="menu-nav" class="nav-item nav-link px-3" href="contact.html"><i class="fas fa-envelope"></i> Contact Us</a>
<form class="form-inline px-2" action="#">
<button class="btn btn-dark" type="submit">Sign Up</button>
<button class="btn btn-dark" type="submit"><i class="fas fa-sign-in-alt"></i>Login</button>
</form>
</div>
</div>
</nav>
#menu-nav{
color: white;
}
/*TO COME BACK TO - BACKGROUND IMAGE TO HOMEPAGE*/
.site-header {
background: url(img/home-header.jpg) no-repeat center;
background-size: cover;
}
.site-header .layout-hero {
min-height: 100vh;
}
.navbar, .btn-dark {
font-family: 'Amatic SC', cursive;
font-weight: 800;
border-radius: 25px;
color: white;
}
.navbar-brand {
font-size: 2.5rem;
font-family: 'Amatic SC', cursive;
font-weight: 600;
color: white;
}
/*This is for the i in the logo name */
.navbar-brand::first-letter {
font-family: 'Charm', cursive;
color: #f5f5f5;
text-shadow: 1px 1px #45b39d;
}
/*This is to override the logo defult blue */
.navbar-brand:hover {
color: white;
}
/*Just for the menu */
.navbar-nav {
background-image: linear-gradient(to bottom right, #5dade2, #45b39d);;
padding: 4px;
border-radius: 25px;
box-shadow: 1px 2px 1px slategrey;
}
.navbar-collapse .nav-link{
display: inline-block;
background :#45b39d;
}
/*for small devices*/
@media(max-width: 767px){
.navbar-brand {
font-size: 2.1rem;
}
.navbar-dark .navbar-toggler {
border-color: rgba(255,255,255,.5);
}
}
解决方案
如果您希望菜单中的所有项目一个一个出现在另一个之下,请将其添加到您的媒体查询中
@media(max-width: 767px){
// the code to add
.form-inline{
display:flex;
flex-direction: column;
}
// end
}
推荐阅读
- android - 片段导航问题。单击我的第二个片段,它仍然显示我的第一个片段选项卡
- python - 过滤掉特定的衍生品
- r - 我的 TraMineR 序列图超出了设置的数据范围。为什么会这样,我该如何解决?
- azure - Kudu Zip Deploy 复制未更改的文件
- r - 如何在 BAS 模型函数中修改向量 (R)
- smpp - 解码 SMPP 日志
- python - print(",".join(result)+"\n") 如何获得相同的结果但写入文件
- javascript - 我如何在本机反应中从辅助函数调度一个动作
- amazon-web-services - 是否可以向 InputPath 添加新的键/值?
- sql - 如何检查 SQL/SAS 中的空值