1

我是Bootstrap的新手，想在其中构建一些有趣的项目。进展不顺利！出于某种原因，我的导航栏没有像这里的模板那样的背景渐变。

这是我所拥有的 JSFiddle。

    <body>
    <div class="container">
        <header>
            <h1>My Website</h1>
            <ul class="nav nav-justified">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section>
        </section>
        <footer>
        </footer>
    </div><!-- .container -->
</body>
4

1 回答 1

0

您还需要添加引导框架 CSS - 例如：http: //jsfiddle.net/rashagen/GS6X6/1/（尤其是下面设置菜单渐变的部分）

.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #777;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #d5d5d5;
  background-color: #e5e5e5; /* Old browsers */
  background-repeat: repeat-x; /* Repeat the gradient */
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* IE10+ */
  background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
}
于 2013-09-30T11:24:25.903 回答