smooth navbar for bootstrap v3.2.0

Question

before I used bootstrap.min.css but now I should use bootstrap v3.2.0.css because of Bootstrap Thumbnail Slider, but when i use Bootstrap 3.2.0 , my top menu not work, how i can have both of them? Bootstrap 3.2.0 Thumbnail Slider and top menu; in bow is my top menu that work with bootstrap.min.css but not work with 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

I find the problem, i change the code of Bootstrap Thumbnail Slider, and it work with 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;
}