引导列之间的空间 [英] Space between bootstrap columns

查看：86
本文介绍了引导列之间的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I wanna to add space between columns on bootstrap grid. Here is my html and css I use stock bootstrap v3.3.4

我尝试使用这些主题： -

I try to use those topics:-


  1. twitter bootstrap网格系统。列之间的间距

  2. 如何在不包装的情况下在引导列之间添加保证金

  3. Bootstrap：在列之间添加边距/填充空间

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

我不想使用偏移

推荐答案

为什么你不在你的引导列中添加一个内部包装并为其添加填充？我不确定这是不是你要问的，但这是一个演示：

Why don't you add an inner wrapper inside your bootstrap column and add padding to it? I'm not sure if this is what you're asking, but here's a demonstration:

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

这篇关于引导列之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆