Question

我试图在700及以上的屏幕上有两排100x100px缩略图，在侧面和底部有理想的30px间距。缩略图位于div中，宽度限制为700px，然后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放入其中，将它们放入特定大小的框中，或者强制使用两行，但希望它可以让您开始使用。

Bootstrap 3缩略图间距

1 个答案: