<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
<li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
<li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
<li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
</ul>
<form class="form-inline">
<a href="#" onclick="signOut();">Sign out</a>
<div id="my-signin2">
<!-- google oauth stuff -->
</div>
</form>
</nav>
</div>
为什么这显示一个垂直列表而不是水平列表?
我删除了navbar-nav
类,并再次水平。我最好的猜测是,Navbar-NAV类具有与navbar-default
样式相关的一些CSS。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
<nav class="navbar navbar-default">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
<li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
<li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
<li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
</ul>
<form class="form-inline">
<a href="#" onclick="signOut();">Sign out</a>
<div id="my-signin2">
<!-- google oauth stuff -->
</div>
</form>
</nav>
</div>
您没有包含jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
,并确保将navbar ul包裹在容器 - 流体中,如所示。这样,当调整大小时,它将响应迅速,并垂直对齐小型视口:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="navigation">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
<li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
<li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
<li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
</ul>
<form class="form-inline">
<a href="#" onclick="signOut();">Sign out</a>
<div id="my-signin2">
<!-- google oauth stuff -->
</div>
</form>
</div>
</nav>
</div>
您可以删除背景。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="menu-outer">
<div id="table">
<nav class="navbar navbar-default horizontal-list">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
<li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
<li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
<li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
</ul>
<form class="form-inline">
<a href="#" onclick="signOut();">Sign out</a>
<div id="my-signin2">
<!-- google oauth stuff -->
</div>
</form>
</nav>
</div>
</div>
<style>
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display: inline;
}
</style>
从我看到的问题中,列表是列表,ul和li将列出垂直列表。如果需要水平,则需要一些CSS或一些样式。
尝试添加类似的内容:
<html>
<head>
<style>
ul li {
display:inline;
}
</style>
</head>
<body>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
<li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
<li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
<li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
</ul>
<form class="form-inline">
<a href="#" onclick="signOut();">Sign out</a>
<div id="my-signin2">
<!-- google oauth stuff -->
</div>
</form>
</nav>
</div>
</body>
</html>