这是 HTML。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<nav class="navbar navbar-inverse">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> </a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">HOME</a> </li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">RESUME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="headline">
<header class="span8">
<h1>Headline goes here</h1>
</header>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在 CSS 中，我没有改变位置或任何东西——只有颜色和间距等等。我将 .navbar .nav > ul 属性设置为 display:box;这会影响它吗？
如果您需要更多信息，请告诉我
这是 jsfiddle，没有 Bootstrap 文件:http://jsfiddle.net/6PRhf
最佳答案
使用以下样式将分隔导航栏元素，具体取决于您希望某些样式的外观，您可以对其进行自定义。但这应该接近您希望的结果。
CSS 文件
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
类似的 Stack Overflow 问题
Bootstrap navbar justify / span menu items occupying full width
关于html - 简单的 Bootstrap 站点 - 导航栏一直覆盖我的主要内容。知道为什么吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18325912/