Question

我想在bootstrap网格上的列之间添加空格。这是我的html和css，我使用stock bootstrap v3.3.4

我尝试使用这些主题： -

twitter bootstrap grid system. Spacing between columns
How do I add a margin between bootstrap columns without wrapping
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
{
	text-align:center;
}

.product-tiles
{
	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>
     	  <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>
     	  <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>
   	      <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="csd.html">Read more »</a></p>
        <p><a class="btn btn-default" href="csd.html">Make inquiry »</a></p>
         		 </div>
       		</div>
       </div>
    </div>

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

Answer 1

为什么不在bootstrap列中添加内包装并为其添加填充？我不确定这是不是你问的问题，但这是一个示范：

.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>

Answer 2

尝试设置＆＃34; margin-bottom＆＃34;

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

Answer 3

如果您使用的是BootStrap 3.3.7，则可以通过NPM使用开源库bootstrap-spacer

npm install bootstrap-spacer

或者您可以访问github页面：

https://github.com/chigozieorunta/bootstrap-spacer

这是一个使用.row-spacer类来分隔行的示例：

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

如果在列之间需要空格，则还可以添加.row-col-spacer类：

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

您还可以将各种.row-spacer和.row-col-spacer类组合在一起：

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Answer 4

检查此代码。它是如何工作的？另请阅读bootstrap documentation。它的bootstrap 3.3.7文档。 Look Bootstrap具有较少的网格系统。如果您希望margin或white space介于两个或更多column之间，那么您的内容将进入column grid。不要用列写border，background-color。在另一个div内创建，然后写border background等。

＆＃13;

.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
{
	text-align:center;
}

.product-tiles
{
	border: 2px solid #94e059;
}

＆＃13;

<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>

＆＃13;

希望这会有所帮助。

引导列之间的空间

4 个答案: