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

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

我已将其更改为弹性框，元素之间的间距相等，以实现正确的水平对齐。

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