Boostrap - 窗口大小调整时缩小的缩略图

当我调整缩放窗口大小时，我想让缩略图移动并适合可用空间。缩略图包含不同大小的图像，第一行似乎很好。然而，第二行的第一个缩略图似乎开始于第一行最长的图像的底部。Boostrap - 窗口大小调整时缩小的缩略图

我想要做的是第一个缩略图或第二行将恰好在第一行的第一个拇指下。

所有的图像都是相同的宽度。

谢谢大家！

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

来源

2016-06-14 sophia

您可以通过在适当的断点处清除列中的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>

来源

2016-06-14 02:41:38 vanburen

尝试使用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>

来源

2016-06-14 03:40:20

Boostrap - 窗口大小调整时缩小的缩略图

回答

相关问题