html - Bootstrap 网格问题

Question

所以我一直在尝试弄清楚如何在 col-sm-4 的每一列之间留出空间，但无法真正找到如何留出间距的方法。如您所见，列之间没有间距。

需要这样的东西:

            <div class="inner_img">
              <img src="img/tablets/phoca_thumb_m_1.png" class="center-block">
            </div>

            <h5>Memorial Code: ...</h5>

            <p>.</p>

          </div>
          <div class="col-sm-4 phocagallery-box-file">
            <img src="img/tablets/phoca_thumb_m_2.png" class="center-block">
            <h5>Memorial Code: ...</h5>

            <p>.</p>
          </div>
          <div class="col-sm-4 phocagallery-box-file">
            <img src="img/tablets/phoca_thumb_m_3.png" class="center-block">
            <h5>Memorial Code: ...</h5>

            <p>.</p>
          </div>

CSS:

.phocagallery-box-file {
  background: #525900;
  display: block;
  padding: 5px;
}

Answer 1

将 padding 添加到包含 col-md-4 的框中将覆盖 Bootstraps 的默认间距填充，从而消除列之间的间距。

这两个选项是将 padding 添加到内部元素，而不是放置 col-md-4 的位置。

例子:

<div class="col-sm-4 phocagallery-box-file">
    <div class="innner-box">
        <img class="center-block" src="img/tablets/phoca_thumb_m_2.png">

        <h5>Memorial Code: ...</h5>

        <p>.</p>
    </div>
</div>

CSS

.phocagallery-box-file {
  background: #525900;
  display: block;
}

.inner-box {
  padding: 5px;
}

和/或

尝试使用 border 并调整它们的粗细。

Example fiddle