Twitter引导程序：在集团之间保持恒定的间距

时间：2016-01-18 10:11:54

标签： css twitter-bootstrap

当添加一系列具有不同高度的集团划分时，这些集团之间的空间不会保持不变。在某些情况下，这种变化非常难看。

有没有办法强制在每个集团之间保持相同的空间（下图中的红色空间）？

enter image description here

HTML code：

<!DOCTYPE html>
<html lang="en">
<head>
 
    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.css" ></link>
    
</head>

  
<div class="container">

    <div class="col-sm-12 " style="padding-right:0px; padding-left:0px; background-color:#f5f5f5;border:1px solid #e3e3e3">

      <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt. Nullam aliquet sodales lorem gravida ultricies. Nunc viverra ultricies suscipit.Cras scelerisque enim sem, venenatis aliquet neque aliquet nec. Pellentesque odio nisl, dapibus ac efficitur a, molestie a lorem.</p>
        </div>
      </div>
        
       <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
        
        <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt.</p>
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt. Nullam aliquet sodales lorem gravida ultricies. Nunc viverra ultricies suscipit</p>
        </div>
      </div>
        
       <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur facilisis quam eget condimentum. Quisque sit amet faucibus dui. Etiam at ex vitae erat tincidunt tincidunt. Nullam aliquet sodales lorem gravida ultricies. Nunc viverra ultricies suscipit</p>
        </div>
      </div>
        
       <div class="col-sm-12 col-md-6 col-lg-4 " > 
        <div class="col-sm-12 col-md-12"   style="background-color: white; border: 1px solid #e3e3e3;margin-top:10px">
          <div class= "col-sm-12">
            <div class="thumbnail">
              <img  src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Auxerre_quai.jpg"/>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    
    </div>

</div>

0 个答案:

没有答案
相关问题
最新问题