css - bootstrap v3.2.0 的平滑导航栏

Question

在我使用 bootstrap.min.css 之前，但现在我应该使用 bootstrap v3.2.0.css 因为 Bootstrap Thumbnail Slider，但是当我使用 Bootstrap 3.2.0 时，我的顶部菜单不起作用，我怎么能同时拥有它们？ Bootstrap 3.2.0 缩略图 slider 和顶部菜单； in bow 是我的顶级菜单，可与 bootstrap.min.css 一起使用但不适用于 bootstrap v3.2.0.css

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">


                    <div class="nav-collapse collapse">
                        <ul class="nav" id="top-nav">


                            <li><a href="#section-1">home</a></li>
                            <li><a href="#section-2">about</a></li>
                            <li><a href="#section-3">portfolio</a></li>
                            <li><a href="#section-4">contant</a></li>
                        </ul>

                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

Answer 1

我发现了问题，我更改了 Bootstrap Thumbnail Slider 的代码，它与 bootstrap.min.css 一起工作

<div class="container">

  <div class="span8">

    <h1>Bootstrap Thumbnail Slider</h1>

    <div class="well">

    <div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">

    <div class="item active">
        <div class="row-fluid">
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    </div><!--/carousel-inner-->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div><!--/myCarousel-->

    </div><!--/well-->
  </div>
</div>


.carousel {
    margin-bottom: 0;
    padding: 0 40px 30px 40px;
}

.carousel-control {
    left: -12px;
}
.carousel-control.right {
    right: -12px;
}

.carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
}

.carousel-indicators li {
    background: #c0c0c0;
}

.carousel-indicators .active {
background: #333333;
}