Question

我有一个col-lg-12 div，其中有3 col-lg-4个问题，这就是这些列之间没有间隙，彼此粘在一起。我试图增加填充，这没有任何帮助。我已经做了很多次，但这次我不明白是什么问题

<div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12" id="ckyc-content-div">

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" id="pancard-card">
<img src="icons/pan_card_s.png" class="center-block" id="pan-card-img">
<div class="col-xs-12 card-text-div">
  <p class="text-center card-header">PAN Card</p>
<p class="text-center card-sub">Issued by the income tax department.</p>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" id="poa-card">
<img src="icons/poa.png" class="center-block" id="poa-card-img">
<div class="col-xs-12 card-text-div">
  <p class="text-center card-header">PAN Card</p>
<p class="text-center card-sub">Issued by the income tax department.</p>
</div>
</div>

<div class="col-lg-4  col-md-4 col-sm-4 col-xs-12" id="sign-card">
<img src="icons/sign_icon.png" class="center-block" id="sign-card-img">
<div class="col-xs-12 card-text-div">
  <p class="text-center card-header">PAN Card</p>
<p class="text-center card-sub">Issued by the income tax department.</p>
</div>
</div> 

</div> <!--CKYC Content div ends -->

以下是fiddle我尝试过来自SO的其他解决方案，但它没有用。

Answer 1

而不是<img id="image" src="//placehold.it/240x120/33d/fff">，请尝试使用padding：

margin

当然，由于添加了.col-lg-4 { margin: 5px; }，您必须考虑div的大小增加。这对我有用：

margin

Answer 2

您必须稍微更改 DOM 以获得块之间的空间。在响应式视图中，还需要更改 CSS 以在它们之间保持适当的间距：

我已使用clearfix类清除float的子元素<div class="col-xs-12 card-text-div">，否则会突然出现。

HTML （仅限部分）：

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div id="pancard-card" class="clearfix">
          <img src="http://www.coca-cola.co.uk/content/dam/journey/gl/gl/icons/socialicon-twit.png" class="center-block" id="pan-card-img">
          <div class="col-xs-12 card-text-div">
              <p class="text-center card-header">PAN Card</p>
              <p class="text-center card-sub">Issued by the income tax department.</p>
          </div>
        </div>
    </div>

<强> CSS ：

#pancard-card,
#poa-card,
#sign-card {
  border-radius: 4px;
  background-color: white;
  padding: 10px; /* Add it for inner spacing for better content view */
  margin: 30px 0 0 0; /* Add it for responsive view spacing */
  box-shadow: 0px 0px 1px 1px rgba(189, 189, 189, 0.3);
}

这是工作JSFiddle

div内的列之间没有空格

2 个答案: