Question

这是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＆gt; ul属性设置为display：box;这会影响它吗？

如果您需要更多信息，请告诉我

这是jsfiddle，没有引导程序文件：http://jsfiddle.net/6PRhf

Answer 1

使用以下样式会将导航栏项目分隔开，具体取决于您希望某些样式看起来可以自定义它。但这应该接近你希望的结果。

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

Answer 2

修复页面上的导航栏，使用以下

<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>

简单的Bootstrap站点 - 导航栏一直覆盖我的主要内容。知道为什么吗？

2 个答案: