Bootstrap 网站图像不能完美排列

Question

这个基于 Bootstrap 的艺术家网站有平铺的照片画廊。我注意到它们看起来很棒，除了在大约 768 像素以下的屏幕上。然后，图像平铺，它们之间有间隙。有时，当图像下方的文本框超过 3 行时，似乎会发生这种情况。我还注意到一些矩形图像存在这个问题（照片库似乎最适合方形图像）但所有图像宽度都相同，所以这应该不是问题。

我该如何解决这个问题，以便无论照片下的文字数量如何，也无论图像高度如何，画廊都能完美平铺？

照片库的代码如下所示：

<div class="portfolio-thumbs-wrapper">

    <!-- row 1 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Eye Witness 2014.jpg">
                <img src="assets/img/portfolio/panel/Eye Witness 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Eye Witness 2014"/>
                <p>EYE WITNESS, 2014 <br>Acrylic on Panel 9" x 15.25"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Ghost 2014.jpg">
                <img src="assets/img/portfolio/panel/Ghost 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Ghost 2014"/>
                <p>GHOST, 2014 <br>Acrylic on Panel 12" x 12"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Her Feelings 2014.jpg">
                <img src="assets/img/portfolio/panel/Her Feelings 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Her Feelings 2014"/>
                <p>HER FEELINGS, 2014 <br>Acrylic on Panel 6"x 16"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/In Hind Sight 2014.jpg">
                <img src="assets/img/portfolio/panel/In Hind Sight 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT In Hind Sight 2014"/>
                <p>IN HIND SIGHT, 2014 <br>Acrylic on Panel 7" x 7.5"</p>
            </a>
        </div>
    </div>
    <!-- row 2 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Lonesome Form 2014.jpg">
                <img src="assets/img/portfolio/panel/Lonesome Form 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Lonesome Form 2014"/>
                <p>LONESOME FORM, 2014 <br>Acrylic on Panel 10" x 7.5"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Model Nude 2014.jpg">
                <img src="assets/img/portfolio/panel/Model Nude 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Model Nude 2014"/>
                <p>MODEL NUDE, 2014 <br>Acrylic on Panel 5.5 x 4.25</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses All 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses All 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" (each)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Blue 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Blue 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(BLUE detail)</p>
            </a>
        </div>
    </div>
    <!-- row 3 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Green 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Green 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(GREEN detail)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Magenta 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Magenta 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(MAGENTA detail)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Orange 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Orange 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(ORANGE detail)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Purple 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Purple 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(PURPLE detail)</p>
            </a>
        </div>
    </div>
</div>

这是 CSS：

.portfolio-thumbs-wrapper-home {
 margin-top: 6em;
 }
.portfolio-thumbs-wrapper {
 margin-top: 2em;
 }
.portfolio-thumbs-wrapper h2 {
display: block;
margin-bottom: 2em;
}
.portfolio-thumbs {
margin-bottom: 2em;
}
.portfolio-thumbs img {
width: 100%;
height: auto;
}

这是一个指向我遇到问题的网站和照片库的链接：这是一个艺术家的网站，因此包含成人内容（恭敬地，作为艺术），但是，如果可以，请不要看'处理它。 www.ericeickmann.com/panel.html

Answer 1

问题是您要从 4 项目行变为现在 2 项目行，并且没有解决由于项目的可变高度而出现的任何浮动问题。一个快速而简单的解决方案是，然后每行内的两个项目清除一次浮动，并且只在移动设备中进行。您可以使用以下引导元素来实现此效果：

<div class="clearfix visible-sm"></div>

在你的情况下，我可以做这样的事情来解决你的一行中的网格问题：

<div class="row portfolio-thumbs leading">
  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Lonesome Form 2014.jpg">
      <img src="assets/img/portfolio/panel/Lonesome Form 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Lonesome Form 2014">
      <p>LONESOME FORM, 2014 <br>Acrylic on Panel 10" x 7.5"</p>
    </a>
  </div>
  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Model Nude 2014.jpg">
      <img src="assets/img/portfolio/panel/Model Nude 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Model Nude 2014">
      <p>MODEL NUDE, 2014 <br>Acrylic on Panel 5.5 x 4.25</p>
    </a>
  </div>

  <div class="clearfix visible-sm"></div>

  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Models and Actresses All 2014.jpg">
      <img src="assets/img/portfolio/panel/Models and Actresses All 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014">
      <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" (each)</p>
    </a>
  </div>
  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Models and Actresses Blue 2014.jpg">
      <img src="assets/img/portfolio/panel/Models and Actresses Blue 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014">
      <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(BLUE detail)</p>
    </a>
  </div>
</div>

这里有更多关于使用网格、清除浮点数和其他引导辅助类的信息：

http://getbootstrap.com/css/#grid-responsive-resets

这里：

http://getbootstrap.com/css/#responsive-utilities

请注意，您使用的是较旧版本的引导程序 (3.1)，因此某些响应类对您来说是不同的（对于 visible-sm，最后没有 -block）。