html - 将轮播元素与缩略图左对齐

Question

我有这个轮播元素，其中包含可点击的缩略图，如下所示:wju。 i.imgur.com

如您所见，轮播元素与缩略图行并不完全对齐。这两个元素都在一个 6 列的 div 中。我希望旋转木马元素向左延伸，以便与缩略图对齐。我尝试更改旋转木马的宽度并四处移动缩略图，但这并没有解决我的问题。

这是轮播和缩略图的 HTML 代码:

div class="col-sm-6" id="slider-thumbs">
                        <!-- Bottom switcher of slider -->
                        <div class="col-sm-12" id="slider">
                            <!-- Top part of the slider -->
                            <div class="row">
                                <div class="col-sm-12" id="carousel-bounding-box">
                                    <div class="carousel slide" id="myCarousel">
                                        <!-- Carousel items -->
                                        <div class="carousel-inner">
                                            <div class="active item" data-slide-number="0">
                                                <img src="images/sommerhuse/blokhus/BL-Kokk01.jpg"></div>

                                            <div class="item" data-slide-number="1">
                                                <img src="images/sommerhuse/blokhus/BL-Kokk02.jpg"></div>

                                            <div class="item" data-slide-number="2">
                                                <img src="images/sommerhuse/blokhus/BL-Stue01.jpg"></div>

                                            <div class="item" data-slide-number="3">
                                                <img src="images/sommerhuse/blokhus/Blokhus ude.jpg"></div>
                                        </div>
                                        <!-- Carousel nav -->
                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul class="hide-bullets">

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-0"><img src="images/sommerhuse/blokhus/BL-Kokk01.jpg"></a>
                            </li>

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-1"><img src="images/sommerhuse/blokhus/BL-Kokk02.jpg"></a>
                            </li>

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-2"><img src="images/sommerhuse/blokhus/BL-Stue01.jpg"></a>
                            </li>

                            <li class="col-sm-3">
                                <a class="thumbnail" id="carousel-selector-3"><img src="images/sommerhuse/blokhus/Blokhus ude.jpg"></a>
                            </li>
                        </ul>

                    </div>

元素的CSS代码:

.carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
     display: block;
     height: 400px !important;
     max-width: 100% !important;
 }
.carousel-inner {
  max-width: 600px !important;
}
    footer h3 {
    color: #000;
    text-align: left;
}

.hide-bullets {
    list-style:none;
    margin-left: -40px;
    margin-top:20px;
}

.thumbnail {
    padding: 0;
}

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
    height: 300px;
}
.carousel {
     margin-bottom: 10px;
}
.thumbnail > img, .thumbnail a > img {
    margin-right: auto;
    margin-left: auto;
    cursor: pointer; cursor: hand;
}

Answer 1

您对轮播有以下定义:

.carousel-inner {
    max-width: 600px !important;
}

这限制了主图像的大小。因此，您要么取消它，要么为包含缩略图的 .hide-bullets 类定义 600px 的宽度。

.hide-bullets {
    list-style: none;
    margin-left: -40px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 600px;
}

我已将其更改为 flexbox，元素之间的间距相等，以便正确水平对齐。

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  display: block;
  height: 400px !important;
  max-width: 100% !important;
}

.carousel-inner {
  max-width: 600px !important;
}

footer h3 {
  color: #000;
  text-align: left;
}

.hide-bullets {
  list-style: none;
  margin-left: -40px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 600px;
}

.thumbnail {
  padding: 0;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  width: 100%;
  height: 300px;
}

.carousel {
  margin-bottom: 10px;
}

.thumbnail>img,
.thumbnail a>img {
  margin-right: auto;
  margin-left: auto;
  cursor: pointer;
  cursor: hand;
}

<div class="col-sm-6" id="slider-thumbs">
  <!-- Bottom switcher of slider -->
  <div class="col-sm-12" id="slider">
    <!-- Top part of the slider -->
    <div class="row">
      <div class="col-sm-12" id="carousel-bounding-box">
        <div class="carousel slide" id="myCarousel">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="active item" data-slide-number="0">
              <img src="http://placehold.it/100"></div>

            <div class="item" data-slide-number="1">
              <img src="http://placehold.it/100"></div>

            <div class="item" data-slide-number="2">
              <img src="http://placehold.it/100"></div>

            <div class="item" data-slide-number="3">
              <img src="http://placehold.it/100"></div>
          </div>
          <!-- Carousel nav -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <ul class="hide-bullets">

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/100"></a>
    </li>

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/100"></a>
    </li>

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/100"></a>
    </li>

    <li class="col-sm-3">
      <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/100"></a>
    </li>
  </ul>

</div>