Bootstrap重叠边框与列没有边距和填充

Question

我对div的边框有这个恼人的问题。 如何避免边框相互重叠？

这是我可以看到问题的codepen： http://codepen.io/mp1985/pen/Bzrgzx

.square {
    background-color: #595959;
    position: relative;
    text-align: center;
    width: 100%;
    -webkit-transition: background-color .3s,color .3s;
    transition: background-color .3s,color .3s;
    overflow: hidden;
    border: 1px solid #ffde14;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

Answer 1

如果你的边框宽度是固定的，你可以通过边框的宽度减少引导套的右边距来避免这种情况：

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
    margin-right: -1px; /* <- */
  }