html - Bootstrap 重叠边框与无边距和填充的列

Question

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

这是我的代码笔，您可以在其中看到问题: 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

如果你的边框宽度是固定的，你可以通过将你的 bootstrap cols 的右边距减少你的边框宽度来避免这种情况:

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