Question

我是css和javasript的新手，我使用默认的twitter bootsrap导航栏下拉，我希望我的导航栏内容占据导航栏整个空间的整个宽度，我在http://twitter.github.com/bootstrap/examples/justified-nav.html处使用示例但不起作用

这是我的HTML代码

<div class="row-fluid">
    <div class="span12">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li><a href="#">About</a></li>
                        <li class="divider-vertical"></li>
                        <li class="span3"><a href="#">Portfolio</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#">Contact</a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#"
                                class="dropdown-toggle"
                                data-toggle="dropdown">
                                Services
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">Web development</a></li>
                                <li><a href="#">Wordpress Theme development</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

请帮助

Answer 1

<强> DEMO

修改后的CSS：

    body {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  /* Custom container */
  .container {
    margin: 0 auto;
    max-width: 1000px;
  }
  .container > hr {
    margin: 60px 0;
  }

  /* Main marketing message and sign up button */
  .jumbotron {
    margin: 80px 0;
    text-align: center;
  }
  .jumbotron h1 {
    font-size: 100px;
    line-height: 1;
  }
  .jumbotron .lead {
    font-size: 24px;
    line-height: 1.25;
  }
  .jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
  }

  /* Supporting marketing content */
  .marketing {
    margin: 60px 0;
  }
  .marketing p + h4 {
    margin-top: 28px;
  }


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

全宽和合理的导航栏

1 个答案: