Boostrap - 窗口大小調整時縮小的縮略圖

Question

當我調整縮放窗口大小時，我想讓縮略圖移動並適合可用空間。縮略圖包含不同大小的圖像，第一行似乎很好。然而，第二行的第一個縮略圖似乎開始於第一行最長的圖像的底部。

我想要做的是第一個縮略圖或第二行將恰好在第一行的第一個拇指下。

所有的圖像都是相同的寬度。

的圖像講千言萬語： https://snag.gy/JqgAIl.jpg

謝謝大家！

<div className="col-lg-8"> 
    <div className="row"> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="87.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="26.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="25.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="34.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="99.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    <div className="col-xs-6 col-md-3"> 
     <a href="#" className="thumbnail"> 
     <img src="12.png" alt="..." /> 
     <div className="caption"> 

     </div> 
     </a> 
    </div> 

    </div> 
</div> 

Answer 1

您可以通過在適當的斷點處清除列中的float來解決此問題。由於縮略圖佈局僅在col-md- *處（特別是col-md-3）發生變化，因此可以使用應用於第4列的nth-child選擇器在992px處執行此操作。

因此表達4N + 1將匹配第一，第五，第九， 第十三，第十七，第二十一，依此類推，元件，如果他們 從Sitepoint存在

：Understanding :nth-child Pseudo-class Expressions 詳情請參閱nth-child tester。

下面是一個你的佈局似乎是一個工作的例子（我知道你正在使用ReactJS但同樣適用）。

注意： 確保將其應用到您的網格時使用一個唯一的標識符，以不打擾你的應用程序可以使用相同的列類的任何其他部分：在本例中是名爲.gallery用於與.row div或者您可以爲每個列單獨添加一個類如.item等等。

例

@media (min-width: 992px) { 
 
    .gallery .col-md-3:nth-child(4n+1) { 
 
    clear: left; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-lg-8"> 
 
     <div class="row gallery"> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>1</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>2</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem 
 
       Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>3</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>4</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>5</strong> Lorem Ipsum is simply dummy. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     <div class="col-xs-6 col-md-3"> 
 
      <a href="#" class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="alt" /> 
 
      <div class="caption"> 
 
       <strong>6</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
      </a> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-4"> 
 
     <strong>Side</strong> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
     </p> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
     </p> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

嘗試使用jQuery插件磚石，它的要好得多。

$('.row').masonry({ 
 
    // options 
 
    itemSelector: '.masonaryclass', 
 
    columnWidth: 200 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script> 
 
<div class="col-lg-8"> 
 
    <div class="row"> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x150" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x100" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x155" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x250" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x50" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    <div class="masonaryclass"> 
 
     <a href="#" class="thumbnail"> 
 
     <img src="http://placehold.it/100x120" alt="..." /> 
 
     <div class="caption"> 
 

 
     </div> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 
</div>