html - 列在 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>

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

感谢您的帮助。

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>