javascript - 引导轮播显示完全空白

Question

控制台显示每个元素都在其应有的位置，但只是没有显示任何东西，就像一切都在白毯子下，我从未见过这种问题，也不知道它可能是什么。奇怪的是连图片都没有显示

这是代码 bootstrap carousel

<!--read-anywhere starts -->
<section class="read-anywhere page" id="read-anywhere">
  <div class="container">
    <div class="row">
      <div class="main-heading clearfix">
        <div class="col-md-12 text-center">
          <h1 class="text-center">Carousel</h1>
          <h2 class="text-center">Carousel sub title.</h2>
        </div>
      </div>

      <div class="col-md-12">
        <div id="read-anywhere-slider" class="carousel fade" data-ride="carousel" data-interval="3000">
          <div class="row">

            <!-- Indicators -->
            <div class="col-md-6">
              <ol class="carousel-indicators">
                <li data-target="#read-anywhere-slider" data-slide-to="0" class="mobile active">
                  <img src="http://lorempixel.com/300/500/" width="30px"> mobile
                </li>
                <li data-target="#read-anywhere-slider" data-slide-to="1" class="kindle">
                  <img src="http://lorempixel.com/300/500/" width="35px"> kindle
                </li>
                <li data-target="#read-anywhere-slider" data-slide-to="2" class="tablet">
                  <img src="http://lorempixel.com/300/500/" width="35px"> tablet
                </li>
                <li data-target="#read-anywhere-slider" data-slide-to="3" class="laptop">
                  <img src="http://lorempixel.com/300/500/" width="45px"> laptop
                </li>
              </ol>
            </div>

            <div class="col-md-6">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">

                <div class="item active">
                  <img src="http://lorempixel.com/300/500/" class="read-ipad">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/300/500/" class="read-laptop">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/300/500/" class="read-iphone">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/300/500/" class="read-kindle">
                </div>

              </div>


            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>
<!--read-anywhere ends -->

Answer 1

您的 HTML 代码包含一些错误。

您当前的代码如下所示(Emmet 风格):

.col-md-12 > .carousel > .row > .col-md-6 + .col-md-6 > .carousel-inner

顺便说一下，在这种情况下，您根本不需要 .col-md-12。所以最终的 HTML 结构将如下所示:

.container > .row > .col-md-6 + .col-md-6 > .carousel > .carousel inner

第二个错误是 .carousel 上的 .fade 类。默认情况下，bootstrap 无法为轮播制作淡入淡出动画。 fade 类仅适用于模态组件。默认轮播行为是滑动的。因此，您需要将 .slide 类添加到您的 .carousel 元素中。

如果你想获得淡入淡出效果，你可以试试别人的片段，比如this codepen .