Question

之前我使用bootstrap.min.css但是现在我应该使用bootstrap v3.2.0.css因为Bootstrap Thumbnail Slider，但是当我使用Bootstrap 3.2.0时，我的顶级菜单不起作用，我怎么能拥有它们？ Bootstrap 3.2.0缩略图滑块和顶级菜单;在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;
}

用于bootstrap v3.2.0的smooth navbar

1 个答案: