我是 bootstrap 的新手，我只是让这个页面的结构几乎与 bootstrap 网站中的入门模板完全一样，但行内容出现在导航栏上。尽管我在 row 元素上使用了 align-items-center Bootstrap 实用程序类。
HTML
<body class="bg-dark -bg-pic -fill-viewport">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-transparent">
<div class="container">
<a class="navbar-brand" href="#">####</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link -link-active px-0 mx-2" href="#">Page principale</a>
</li>
<li class="nav-item">
<a class="nav-link -link px-0 mx-2" href="#">Ajouter une annonce</a>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Se connecter</button>
</div>
</div>
</nav>
<main role="main" class="container">
<div class="row">
<div class="col-md-2 col-lg-3"></div>
<div class="col-12 col-md-8 col-lg-6 text-center">
<h1 class="text-white">Hello</h1>
<p class="lead -text-white-70">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum sed ipsum ac turpis vestibulum aliquet.
Morbi ac neque quis justo posuere tincidunt in id arcus.</p>
<form class="" action="#">
<div class="input-group">
<input class="form-control" placeholder="Rechercher" name="search" type="text">
<div class="input-group-append">
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-2 col-lg-3"></div>
</div>
</main>
自定义 CSS
/* Utility classes*/
.-fill-viewport {
min-height: 100vh;
}
.-text-white-70 {
color: rgba(255,255,255,0.7);
}
/* Medium devices and higher */
@media only screen and (min-width: 768px) {
.-link-active {
border-style: solid;
border-color: white;
border-width: 0px 0px 3px 0px;
}
.-link:hover {
border-style: solid;
border-color: rgba(211,211,211,0.6);
border-width: 0px 0px 3px 0px;
}
}
/* small devices and higher */
@media only screen and (min-width: 576px) {
.-bg-pic {
background: linear-gradient(
rgba(20,20,20, .6),
rgba(20,20,20, .6)),
url("background.jpeg") center/cover no-repeat;
}
}
最佳答案
那是因为您为导航栏使用了 fixed-top。
将 mt-5 添加到主容器中，如果需要，还可以将 pt-5 添加到主容器中，这样就可以了。
<main role="main" class="container mt-5 pt-5">
mt-* 表示“margin-top”，pt-* 表示“padding-top”。
关于html - Bootstrap 4 行内容出现在导航栏上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48632678/