使 3 张图像在 bootstrap 轮播中并排放置并居中

Question

我正在尝试制作 bootstrap 旋转木马。但是，我试图让其中一张幻灯片由 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

从技术上讲，您可以将任何内容放入轮播中，它不需要只是一张图片，因此您可以只使用 bootstrap 列来完成。

例如：

<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>

使 3 张图像在 bootstrap 轮播中并排放置并居中

Making 3 images sit next to eachother in bootstrap carousel and be centered

html

css

carousel

twitter-bootstrap

responsive