Bootstrap中列堆叠时出现双重边框

Question

当这两列堆叠在另外两列上时，交叉处的边框会出现双重边框。我正在使用bootstrap。

.border-col {
   border:1px dotted grey;
}

<div class="row">
  <div class="col-xs-6 border-col"></div>
  <div class="col-xs-6 border-col"></div>
  <div class="col-xs-6 border-col"></div>
  <div class="col-xs-6 border-col"></div>
</div>

我该如何避免出现双重边框？我尝试使用子选择器，但好像无法完全做到。

谢谢你的帮助。

- Netrunner21

Answer 1

之前的例子没有考虑垂直方向，这里有一个可能更好的例子，它依赖于CSS3。

.border-col {
  border: 1px dotted gray;
  border-bottom: none
}

.border-col:nth-child(odd) {
  border-right: none;
}

.border-col:nth-last-child(2) {
  border-bottom: 1px dotted gray;
}

.border-col:last-child {
  border: 1px dotted gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6 border-col">text</div>
    <div class="col-xs-6 border-col">text</div>
    <div class="col-xs-6 border-col">text</div>
    <div class="col-xs-6 border-col">text</div>
    <div class="col-xs-6 border-col">text</div>
  </div>
</div>

- Yaron Meiner

---

太好了，感谢您的帮助，完美地运作了。没有任何边框丢失，也没有任何双重边框。 - Netrunner21

嗨，相关问题。与原始问题完全相同的样式和HTML；但是这一次，请保留边框，并在它们之间应用空格。应用上/下边距效果很好。然而，任何左/右边距都会使两列堆叠。 - Netrunner21

第一种解决方案出了些问题。在482像素以下的情况下，它可以正常工作。但是，在481像素及以下的情况下，左下角的框会掉下来。减少默认的BS填充可以解决此问题（padding-right: 15px; padding-left: 15px;）。然而，即使将填充设置为零，在更低的分辨率下，同样的问题仍会发生。有没有除填充之外的其他解决方法？我可以在低分辨率下使用白色边框右侧。这也是一个解决方法，因为背景也是白色的，但是任何更准确的解决方法都会受到欢迎！ - Netrunner21

根据Bootstrap的指示，我们不能在列（cols）外部放置边距，否则会破坏列的结构。我的建议是在列内部使用填充（padding）来处理。我的团队通常的做法是将列仅用作网格线，然后尽可能地将元素构建为子元素。这可以避免您处理额外宽度和默认功能的麻烦。 - Yaron Meiner

感谢您让我知道这一点，否则我会很难想出 BS 允许顶部/底部但不允许左侧/右侧，并且这是一个硬编码的特性。是的，您是正确的，仅使用列作为网格线是个好主意。但在这种情况下，我想要虚线网格线的视觉效果，圆角且带有一些空间间隔。我认为即使我使用 box-sizing: content-box，也无法仅通过填充来实现这一点。如果我想要朝这个方向前进，可能唯一剩下的就是使用虚线图像边框了。 - Netrunner21

Answer 2

.border-col {
   border:1px dotted grey;
  border-bottom:0;
}
.border-col:last-child {
   border:1px dotted grey;
}

这里放PEN

- ZP Baloch

Answer 3

对于所有的 div，除了第一个和最后一个 div，只使用一个边框，这将帮助您避免双重边框。

.border-col {
   border:1px dotted grey;
   border-bottom: 0;
}

.border-col:last-child {
   border: 1px dotted grey;
}

- Kannan T