Question

请问一个简单的问题。我刚刚开始尝试使用Bootstrap，这让我感到困惑了几天。我正在尝试在通过按下按钮触发的模态内创建图像轮播。它可以正常工作..但轮播显示不正确。

我在此处创建了一个简单的测试示例：https://jsfiddle.net/c0kbma6j/，以演示该问题。

我正在触发这样的模式：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#S2002Modal"> Test </button>

<!--begin modal window-->
<div class="modal fade" id="S2002Modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="pull-left">My Gallery Title</div>
        <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
      </div>
      <div class="modal-body">

        <!--begin carousel-->
        <div id="myGallery" class="carousel slide" data-interval="false">
          <div class="carousel-inner">
            <div class="item active"> <img src="https://placeimg.com/600/400/nature/1" alt="item0">
              <div class="carousel-caption">
                <h3>Heading 3</h3>
                <p>Slide 0 description.</p>
              </div>
            </div>
            <div class="item"> <img src="https://placeimg.com/600/400/nature/2" alt="item1">
              <div class="carousel-caption">
                <h3>Heading 3</h3>
                <p>Slide 1 description.</p>
              </div>
            </div>
            <div class="item"> <img src="https://placeimg.com/600/400/nature/3" alt="item2">
              <div class="carousel-caption">
                <h3>Heading 3</h3>
                <p>Slide 2 description.</p>
              </div>
            </div>

            <!--end carousel-inner-->
          </div>
          <!--Begin Previous and Next buttons-->
          <a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
          <!--end carousel-->
        </div>
        <!--end modal-body-->
      </div>
      <div class="modal-footer">
        <div class="pull-left">
          <small>Photographs by <a href="https://placeimg.com" target="new">placeimg.com</a></small>
        </div>
        <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
        <!--end modal-footer-->
      </div>
      <!--end modal-content-->
    </div>
    <!--end modal-dialoge-->
  </div>
  <!--end myModal-->>
</div>

有人可以给我一些指导吗？真让我发疯！

谢谢。

Answer 1

您拼写了班级名称。在包含图像的所有div上将class =“ item”更改为class =“ carousel-item”。

有关Bootstrap documentation的更多信息。

新手引导问题：模态图像轮播

1 个答案: