详细信息:我正在使用 bootstrap 3.3.6，试图用 bootstrap 制作我的第一个导航栏，一个可以在手机上折叠以获得更好的 ui 的导航栏。
问题:单击切换按钮时，选项未显示在导航品牌下，但第一个显示在品牌旁边，其余选项显示在第一个选项下方。
例如 -> 
我希望选项堆叠在导航品牌“Dhruv Yadav”下。
index.html ->
<!DOCTYPE html>
<html>
<head>
<title>Dhruv Yadav</title>
<link type="text/css" rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand" style="color:white;font-family:'customfont',sans-serif;font-weight:bold;font-size:30px;">Dhruv Yadav</a>
<button id="navbtn" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<i style="color:white;" class="fa fa-arrow-down" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right navoptions">
<li><a class="navoptions" href="#">Home</a></li>
<li><a class="navoptions" href="#">About</a></li>
<li><a class="navoptions" href="#">Portfolio</a></li>
<li><a class="navoptions" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="card"></div>
<script src="bootstrap.min.js"></script>
</body>
</html>
main.css ->
@font-face
{
font-family: "customfont";
src : url("AlexBrush-Regular.ttf") format("truetype");
}
#navbar
{
background-color: #C00000;
}
#navbtn
{
background-color : #C00000;
border : 2px solid white;
border-radius: 10px;
height : 38px;
}
#navbtn:hover
{
transition : all 0.1s ease-in;
background-color : #900000;
}
.card
{
width : 100%;
height : 400px;
margin : 0 auto;
background-color : white;
}
.navoptions
{
font-size : 17px;
font-weight : 200;
font-family : sans-serif;
color : white;
}
.navoptions:hover
{
transition : all 0.25s ease-in;
color : black;
}
谢谢，如有任何帮助，我们将不胜感激。
最佳答案
您忘记了包装品牌和按钮:
<div class="navbar-header">
<a href="#" class="navbar-brand" style="color:white;font-family:'customfont',sans-serif;font-weight:bold;font-size:30px;">Dhruv Yadav</a>
<button id="navbtn" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<i style="color:white;" class="fa fa-arrow-down" aria-hidden="true"></i>
</button>
</div>
关于html - 导航栏选项不在标题引导下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36675362/