左對齊旋轉木馬元素與縮略圖

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>