css - Bootstrap 3 缩略图间距

Question

我试图在 700 及以上的屏幕上显示两行 100x100 像素的缩略图，理想情况下两侧和底部的间距为 30 像素。缩略图位于将宽度限制为 700px 的 div 中，然后 fancybox 将它们打开得更大。我希望缩略图保留相同的填充，只调整到各种屏幕尺寸，但改变行数。下面是我正在使用的，它已经接近了，但我希望有更好的方法来微调它。

<div class="inner cover">
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4">
            <a data-fancybox-title="<p><em>this tittle/em>, smapletext.</p><p>  This is a whole bunch of text to use as a description</p>" class="fancybox" href="./placehold.it/700x00"><img src="./placehold.it/100x100" class="thumbnail img-responsive"></a>
        </div>
    </div> 
</div>

Answer 1

如果我了解您想要实现的目标，float:left 就是您的伙伴...

CSS:

img{
  float:left; 
  margin:15px
}

HTML:

<div class="inner cover">
  <div class="container">
    <a class="fancybox" href="http://placehold.it/700x700">
      <img src="http://placehold.it/100x100" class="thumbnail img-responsive">
    </a>
    <a class="fancybox" href="http://placehold.it/700x700">
      <img src="http://placehold.it/100x100" class="thumbnail img-responsive">
    </a>
    <a class="fancybox" href="http://placehold.it/700x700">
      <img src="http://placehold.it/100x100" class="thumbnail img-responsive">
    </a>
    ...      
  </div>
</div>

示例:http://www.bootply.com/y6Q6lnJxdJ

您可能还想定义一个 max-width，或者在其中放置一个 col-sm-8 col-sm-2-offset 将它们放入您的特定大小的盒子，或强制你的两行，但希望它能帮助你开始。