0

这是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，没有引导文件：http: //jsfiddle.net/6PRhf

4

2 回答 2

0

修复页面导航栏，使用如下

<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
于 2013-08-20T22:58:47.047 回答
0

使用以下样式将分隔导航栏项目，具体取决于您希望某些样式看起来如何，您可以对其进行自定义。但这应该接近你想要的。

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;
}

类似的堆栈溢出问题

Bootstrap navbar justify / span 占据全宽的菜单项

于 2013-08-20T02:59:29.343 回答