左对齐旋转木马元素与缩略图

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>