当列在引导程序中堆叠时的双边框答案

【问题标题】：double borders when columns stack in bootstrap当列在引导程序中堆叠时的双边框
【发布时间】：2017-11-11 11:00:25
【问题描述】：

当这两列堆叠在其他两列之上时，我在十字架上得到了一个双边框。我正在使用引导程序。

.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>

如何避免出现双边框？我尝试过使用子选择器，但似乎无法完全正确。

感谢您的帮助。

【问题讨论】：

标签： html css twitter-bootstrap css-selectors

【解决方案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>

【讨论】：

太好了，感谢您的帮助，完美运行。没有缺少边框，也没有任何地方的双边框。
您好，相关问题。与原始问题完全相同的样式和 HTML；但是这一次，保持边界不变，并在它们之间应用空间。应用顶部/底部边距效果很好。然而，任何左/右边距都会使两列堆叠。
想出了第一个解决方案。它工作正常，直到 482 像素。在 481px 及以下，左下方的框会下降。减少默认的 BS 填充可以解决此问题（padding-right: 15px; padding-left: 15px;）。然而，即使填充设置为零，在更低的分辨率下，同样的事情也会再次发生。除了填充之外还有什么修复吗？我可以在低分辨率下使用白色边框。这也是一个修复，因为背景也是白色的，但欢迎任何更准确的内容！
按照引导程序的指示，我们不能将边距放在列之外，否则会破坏列的结构。我的建议是使用 col 内的填充来代替。我的伙计们通常的工作方式是仅将列用作网格线，然后在内部尽可能多地构建元素作为子元素。它使您不必处理额外的宽度和默认功能。
感谢您让我知道，我很难弄清楚 BS 允许上/下而不是左/右，而且这是一个硬编码的功能。是的，你是对的，仅使用列作为网格线是一个好主意。不过，在这种情况下，我想要虚线网格线的视觉效果，圆形，并用一些空间分隔。我不认为这可以通过填充来完成，即使我使用 box-sizing: content-box.如果我想朝这个方向发展，可能唯一剩下的就是使用虚线图像边框。

【解决方案2】：

您可以像这样消除冲突的边界：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
  .border-col { border:1px dotted grey; }
  .border-col:nth-child(n) {
    border-right: none;
  }

  .border-col:nth-child(-n+2) {
    border-bottom: none;
  }

  </style>
</head>

<body>
  <div class="row">
    <div class="col-xs-6 border-col">lorem</div>
    <div class="col-xs-6 border-col">ipsum</div>
    <div class="col-xs-6 border-col">dolor</div>
    <div class="col-xs-6 border-col">dang</div>
  </div>
</body>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

PEN Here

【讨论】：