1. 홈
  2. 질의 응답
  3. 부트 스트랩 열 사이의 공간

부트 스트랩 열 사이의 공간

2017-02-14 2 views
-2

부트 스트랩 그리드의 열 사이에 공백을 추가하고 싶습니다. 여기에 내가 그 주제를 사용하려고 재고 부트 스트랩 v3.3.4부트 스트랩 열 사이의 공간

를 사용하여 내 HTML과 CSS입니다 : -

  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

I 편집 조각 및 ANS를이 당신이 요구하는지,하지만 여기 데모입니다 있는지 확실하지 않습니다. 이것을 확인하십시오. – 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도 읽으십시오. 부트 스트랩 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

관련 문제

 관련 문제