.navbar-btn {
color: white;
background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
color: skyblue;
background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
color: white;
}
.dropdown-item:hover {
color: skyblue;
background-color: rgba(255, 255, 255, 0);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-inverse bg-inverse">
<div class="flex-container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Title</a>
<span> </span>
<!-- Do this better somehow -->
<button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown pull-right">
<button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
<i class="fa fa-cog fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
<!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i> Login</button>-->
<!-- fa-address-card -->
<button class="dropdown-item"><i class="fa fa-user fa-lg"></i> Profile</button>
<button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i> Logout</button>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Global Config</h6>
<button class="dropdown-item"><i class="fa fa-globe fa-lg"></i> Lang</button>
<button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i> Theme</button>
</div>
</div>
</div>
</nav>
<div style="color:black;">Hello World!</div>
我有一个bootstrap 4 top nav，我的身体不会显示，最后是 hello world 。这是怎么回事？我没有看到它不显示的原因。
这是css问题还是html问题？我的代码在我尝试在线编辑器的任何地方都能正确编译，因此它看起来不像是一个环境问题。
答案 0 :(得分：1)
它隐藏在nav后面，所以只需添加margin-top即可立即查看：
.hello{
margin-top: 100px;
}
解决方案1 :(添加margin-top）：
.navbar-btn {
color: white;
background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
color: skyblue;
background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
color: white;
}
.dropdown-item:hover {
color: skyblue;
background-color: rgba(255, 255, 255, 0);
}
.hello{
margin-top: 100px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-inverse bg-inverse">
<div class="flex-container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Title</a>
<span> </span>
<!-- Do this better somehow -->
<button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown pull-right">
<button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
<i class="fa fa-cog fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
<!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i> Login</button>-->
<!-- fa-address-card -->
<button class="dropdown-item"><i class="fa fa-user fa-lg"></i> Profile</button>
<button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i> Logout</button>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Global Config</h6>
<button class="dropdown-item"><i class="fa fa-globe fa-lg"></i> Lang</button>
<button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i> Theme</button>
</div>
</div>
</div>
</nav>
<div class="hello">Hello World!</div>
解决方案2 :(删除fixed-top并使用sticky-top），因为固定设置位置会将内容向上移动：
.navbar-btn {
color: white;
background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
color: skyblue;
background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
color: white;
}
.dropdown-item:hover {
color: skyblue;
background-color: rgba(255, 255, 255, 0);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar sticky-top navbar-inverse bg-inverse">
<div class="flex-container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Title</a>
<span> </span>
<!-- Do this better somehow -->
<button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown pull-right">
<button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
<i class="fa fa-cog fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
<!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i> Login</button>-->
<!-- fa-address-card -->
<button class="dropdown-item"><i class="fa fa-user fa-lg"></i> Profile</button>
<button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i> Logout</button>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Global Config</h6>
<button class="dropdown-item"><i class="fa fa-globe fa-lg"></i> Lang</button>
<button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i> Theme</button>
</div>
</div>
</div>
</nav>
<div class="hello">Hello World!</div>
<pre>
1
2
3
4
5
6
6
71
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7</pre>