是否可以在 Bootstrap 中使用多行导航栏而不使用两个导航栏？
我想完成这样的事情:
这是我的代码:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Logo", "Index", "Home", new { area = "" }, new { @class = "navbar-brand custom-li" } )
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink( "About us", "About", "Home" )</li>
<li>@Html.ActionLink( "Contact", "Contact", "Home" )</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("Sign up", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
<li>@Html.ActionLink("Login", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
</ul>
</div>
</div>
</div>
</body>
这是 JSFiddle:https://jsfiddle.net/oc88hnLL/2/
此外，我的解决方案在折叠时不起作用。当窗口变得太小时， Logo 会向左移动并且不会保持居中。
最佳答案
请参阅下面的代码片段或 jsfiddle -> jsfiddle
为了使 Bootstrap 正常工作，请确保在 <head> 中包含 jQuery部分。
如果这就是你要找的，请告诉我
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.navbar-fixed-top {
background-color: #FFF;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
border-top-width: 0px;
border-bottom-width: 0px;
}
.navbar-header {
float:left;
width:100%;
text-align:center;
}
ul.navbar-nav > li {
display:inline;
}
ul.navbar-nav{
float: none;
margin: 0 auto;
text-align:center;
display:table;
}
.logo {
text-align:center;
}
.content { min-height:1000px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<body>
<div class="navbar navbar-white navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="">Logo</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Register</a></li>
<li><a href="">Login</a></li>
</ul>
</div>
</div>
</body>关于html - 带有居中 Logo 的多行导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39827093/