在台式机上,我喜欢导航栏的外观,但是当将其调整为移动尺寸时,它会垂直将其推向标题的大小/下方,但我希望将其水平显示。
我尝试显示行内无效的内容。
我知道如何使用媒体查询,但是我只需要帮助即可在标题下将每个导航项显示为彼此相邻。
document.body.classList.add('fade');
document.addEventListener("DOMContentLoaded",function(e) {
document.body.classList.remove('fade');
});
body {
opacity: 1;
transition: 0.7s opacity;
}
body.fade {
opacity: 0;
transition: none;
}
.header {
padding-left: 50px;
}
#nav {
padding-right: 50px;
}
.nav {
transition: linear 0.4s;
}
.nav:hover {
color: #5a5f61;
text-decoration: underline;
}
.mt-5 {
margin-top: 5% !important;
}
.mt-6 {
margin-top: 2.5% !important;
}
.mt-7 {
margin-top: 2.5% !important;
}
.bgcolor {
background-color: lemonchiffon;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 486px) {
.mt-5 {
margin-top: 10% !important;
}
.mt-6 {
margin-top: 2.5% !important;
}
.mt-7 {
margin-top: 2.5% !important;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.jss"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav">
<h2 class="header text-light"> Main Brand Heading </h2>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link nav font-weight-bold text-light" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link nav font-weight-bold text-light" href="contact.php">Contact</a>
</li>
</ul>
</nav>
<!-- END Nav bar -->
<div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>