Question

我试图制作Boostrap网格不均匀尺寸的缩略图。但有些缩略图不均匀，导致某些行之间存在巨大差距。

我在缩略图上没有任何样式。

有没有办法解决它而不添加像Masonry / Isotope / Salvattore这样的东西？

Answer 1

您可以使用两个<div>或两个.row代码：

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
</div>

有关详细信息，请访问Example: Stacked-to-horizontal。

Answer 2

修复布局最简洁的方法是使用砌体类型的布局。在处理混合尺寸的介质时，它将允许最平滑的外观并且是非常流畅且响应灵敏的布局。虽然如果您完全控制放置在网站上的数据/图像，我建议您创建每个图像的大小和类型相同。如果您愿意，我可以提供一个示例，我使用带有缩略图和Bootstrap的砌体类型的布局创建。

编辑以添加示例代码：

/* CSS styles */
.row {
    -moz-column-width: 12em;
    -webkit-column-width: 12em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    column-width: 12em;
    column-gap: 1em;
    column-fill: balance;
    width: 100%;
}

/* Outer div block */
.section-block {
    display: block;
    padding:  .25rem;
    width:  100%; 
}

/* Inner div block */
.section-item {
   position:relative;
   display: inline-block;
   width: 100%;
}

.section-item img{
    width: 100%;
}

//Wrapper for each img you are adding
<div class='section-block'>
    <div class='section-item'>
        <div>
            <a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
                <img src='/imgs/image.jpg'>
                <p class='caption'>Image Caption</p>
            </a>                            
        </div>
    </div>
</div>

我将它与php一起使用以从db获取我的所有图像然后我遍历每个图像并使用上述语法回显到页面。这应该工作，而不必使用任何额外的js库超出你用于bootstrap的。这为您提供了一种非常灵敏的砌体布局风格，适用于现代浏览器。

Bootstrap缩略图在两者之间留下间隙

2 个答案: