引導程序3縮略圖間距

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放入您的特定大小的框中，或強制您的兩行，但希望它能讓您開始。