Question

我的页面上有一个Bootstrap轮播，但它无法正常工作。我正在显示我的数据库中的6个项目，但我只想在第一个轮播页面上有3个项目，然后在下一个中需要3个项目。但相反，它显示了在一个页面上折叠的所有项目。

这是我的代码

<div class="row">
        <div class="carousel slide" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner">
                <div class="item active">
                    <ul class="thumbnails" data-bind="foreach: myMovies">
                        <li class="col-md-4">
                            <div class="fff">
                                <div class="thumbnail">
                                    <a href="#"><img src="some image src"></a>
                                </div>
                                <div class="caption">
                                    <h4 data-bind="text: Movies().Title"></h4>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <nav>
                <ul class="control-box pager">
                    <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
                    <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
                </ul>
            </nav>
        </div>
    </div>

和我的css

img {
    max-width: 100%;
}

.thumbnails li > .fff .caption {
    background: #fff !important;
    padding: 10px
}

ul.thumbnails {
    margin-bottom: 0px;
}

.caption h4 {
    color: #444;
    text-align: center !important;
}

.caption p {
    color: #999;
}

li {
    list-style-type: none;
}

#caption-value {
    background-color: lightgray !important;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .page-header, .control-box {
        text-align: center;
    }
}

@media (max-width: 479px) {
    .caption {
        word-break: break-all;
    }
}

ul.thumbnails {
    padding: 0;
}

哪里似乎有问题？

Answer 1

ul.thumbnails {
    margin-bottom: 0px;
}

.caption h4 {
    color: #444;
    text-align: center !important;
}

.caption p {
    color: #999;
}

li {
    list-style-type: none;
}

#caption-value {
    background-color: lightgray !important;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .page-header, .control-box {
        text-align: center;
    }
}

@media (max-width: 479px) {
    .caption {
        word-break: break-all;
    }
}

ul.thumbnails {
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <ul class="thumbnails" data-bind="foreach: myMovies">
        <li class="col-md-4">
          <div class="fff">
            <div class="thumbnail">
              <a href="#"><img src="http://placehold.it/200x50"></a>
            </div>
            <div class="caption">
              <h4 data-bind="text: Movies().Title"></h4>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="item">
      <ul class="thumbnails" data-bind="foreach: myMovies">
        <li class="col-md-4">
          <div class="fff">
            <div class="thumbnail">
              <a href="#"><img src="http://placehold.it/200x50"></a>
            </div>
            <div class="caption">
              <h4 data-bind="text: Movies().Title"></h4>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
  <nav>
    <ul class="control-box pager">
      <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
      <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
                </ul>
            </nav>
 
</div>

Bootstrap轮播无法正常工作

1 个答案: