Question

我正在尝试制作一个引导旋转木马。但是，我正在尝试制作一张幻灯片，其中包含3张图片，这些图片彼此相邻，包裹在div中。

节目中的所有其他幻灯片都居中并且看起来不错，但是包含在div中的3 img组成的幻灯片只是保持浮动到页面左侧，即使我没有告诉他们。

我将包含代码。

轮播

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/jumbotron.jpg" alt="cd release promo">
    </div>

    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (10).jpg" alt="Robby and Ryan in blue">
    </div>


    <!-- Div containing 3 images --> 
    <div id="ryanSlide" class="item">
      <div id="ryanSlideContainer">
        <img src="images/Coldclock Knockout Local 662 (38).jpg" alt="Ryan 1">
        <img src="images/Coldclock Knockout Local 662 (46).jpg" alt="Ryan 2 B&W">
        <img src="images/Coldclock Knockout Local 662 (47).jpg" alt="Ryan 3">
      </div>
    </div>

    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (48).jpg" alt="Crowd Shot">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>

此页面上也使用了CSS + bootstrap

body {
    background-color: black;
}



/*================================================================================================

NAVIGATION  

================================================================================================*/



.active {
    border-bottom: 1px solid red;
}
.navbar-inverse .navbar-nav > .active > a{
    font-size: 1.25em;
}

#navigation {
    margin-bottom: 0px;
    border-radius: 0px;
}



/*================================================================================================

JUMBOTRON

================================================================================================*/


#myCarousel img {
    height: 500px;
    margin: 0 auto;
}

#ryanSlide {
    margin: 0 auto;
    width: 100%;
}

#ryanSlideContainer {
    margin: 0 auto;
}

#ryanSlide img {
    margin: 0 auto;
}

/*================================================================================================



================================================================================================*/

我没有使用任何自定义javascript。

我似乎无法弄清楚如何让一张幻灯片像其他幻灯片一样居中。

Answer 1

您可以在技术上将任何内容放在旋转木马中，它不需要只是一个图像，因此您可以使用引导列来执行此操作。

例如：

<div id="ryanSlide" class="item">
    <div class="col-md-4">
        <img src="" class="img-responsive center-block" alt=""/>
    </div>
    <div class="col-md-4">
        <img src="" class="img-responsive center-block" alt=""/>
    </div>
    <div class="col-md-4">
        <img src="" class="img-responsive center-block" alt=""/>
    </div>
</div>

在bootstrap轮播中将3张图像放在彼此旁边并居中

1 个答案: