1. 首頁
  2. 問答
  3. 引導列之間的空間

引導列之間的空間

2017-02-14 65 views
-2

我想在引導程序網格的列之間添加空格。 這是我的HTML和CSS我用股票自舉v3.3.4引導列之間的空間

我嘗試使用這些主題： -

  1. twitter bootstrap grid system. Spacing between columns
  2. How do I add a margin between bootstrap columns without wrapping
  3. Bootstrap: add margin/padding space between columns

.product-icon { 
 
    min-height: 30px; 
 
    position: relative; 
 
    top: 65px; 
 
    z-index: 999; 
 
    margin:0 auto; 
 
} 
 

 
.product-header 
 
{ 
 
background-image:url("http://placehold.it/350x102"); 
 
background-size:cover; 
 
border-bottom: 2px solid #94e059; 
 
min-height: 102px; 
 
} 
 

 
.product-information 
 
{ 
 
\t text-align:center; 
 
} 
 

 
.product-tiles 
 
{ 
 
\t border: 2px solid #94e059; 
 
}
<div class="row"> 
 
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
        <img src="images/softwaredev-icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
        <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
        <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
      </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
        <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
        <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
        <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     \t <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
       <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
       <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
      \t \t </div> 
 
     \t \t </div> 
 
     </div> 
 
    \t  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
       <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
       <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
      \t \t </div> 
 
     \t \t </div> 
 
     </div> 
 
     \t <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
       <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
       <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
      \t \t </div> 
 
     \t \t </div> 
 
     </div> 
 
    \t  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
       <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
       <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
      \t \t </div> 
 
     \t \t </div> 
 
     </div> 
 
    \t  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
       <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
       <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
     <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
      \t \t </div> 
 
     \t \t </div> 
 
     </div> 
 
    \t  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header"> 
 
       <img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information"> 
 
       <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
     <p><a class="btn btn-default" href="csd.html">Read more »</a></p> 
 
     <p><a class="btn btn-default" href="csd.html">Make inquiry »</a></p> 
 
      \t \t </div> 
 
     \t \t </div> 
 
     </div> 
 
    </div>

我不想在列上使用偏移量。

來源

2017-02-14 Stanislav Balev

+0

我編輯片段，並答。檢查這個。 – Rahul

回答

0

你爲什麼不加入一個內部包裝物的引導柱內添加填充呢？我不知道這是否是你問，但這裏有一個演示：

.inner-wrapper { 
 
    padding: 0 25px; /* padding on both sides */ 
 
    padding: 25px 0; /* padding for top and bottom */ 
 
    padding: 25px; /* padding all along */ 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="inner-wrapper"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <div class="inner-wrapper"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <div class="inner-wrapper"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p> 
 
    </div> 
 
    </div> 
 
    
 
</div>

來源

2017-02-14 16:08:22 zsawaf

-1

檢查此密碼。它是如何工作的？也讀bootstrap documentation。它是bootstrap 3.3.7文檔。 Look Bootstrap具有較少的網格系統裕量。如果您想要margin或white space兩個或多個column之間，則您的內容將在column grid內。不要在欄中填寫border,background-color。創建內的另一個div然後寫borderbackground等

.product-icon { 
 
    min-height: 30px; 
 
    position: relative; 
 
    top: 65px; 
 
    z-index: 999; 
 
    margin:0 auto; 
 
} 
 

 
.product-header 
 
{ 
 
background-image:url("http://placehold.it/350x102"); 
 
background-size:cover; 
 
border-bottom: 2px solid #94e059; 
 
min-height: 102px; 
 
} 
 

 
.product-information 
 
{ 
 
\t text-align:center; 
 
} 
 

 
.product-tiles 
 
{ 
 
\t border: 2px solid #94e059; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
<div class="row"> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group"> 
 
      <div class="product-tiles"> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-header"> 
 
         <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt=""> 
 
        </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="product-information"> 
 
         <br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr> 
 
    <p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p> 
 
      <p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p> 
 
        </div> 
 
        
 
        </div> 
 
       </div> 
 
      </div> 
 
       
 
      </div> 
 
    </div> 
 
</div>

希望這會有所幫助。

來源

2017-02-14 15:40:13 Rahul

0

嘗試設置「下邊距」

.product-header 
{ 
background-image:url("http://placehold.it/350x102"); 
background-size:cover; 
border-bottom: 2px solid #94e059; 
min-height: 102px; 
margin-bottom: 20px; 
}

來源

2017-02-14 15:52:31 grinmax

相關問題

 相關問題