Question

当这两个列堆叠在另外两列的顶部时，我在十字架上得到一个双边框。我正在使用bootstrap。

＆＃13;

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

＆＃13;

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

＆＃13;

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

感谢您的帮助。

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>

Answer 2

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

PEN Here

Answer 3

只为所有div使用一个边框，期望第一个div或最后一个div可帮助您避免双边框

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

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

Answer 4

你可以像这样消除相互冲突的边界：

＆＃13;

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

＆＃13;

当列在引导程序中堆叠时，双边框

4 个答案: