在引导程序参数周围添加一致的1px边界

Question

有没有一种干净的，只有css的方式来在cols周围添加一致的1px边框，当两个边框并排时，你没有2px边框？请注意，外边有一个1px的边框，而内边边框是双倍宽度，因为它们是并排的。基本上，我想要表格单元格的边框，但是要有网格的响应性。

​

#example {
  padding: 20px;
}

#example .col {
  border: 1px solid #c9c9c9;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>


<div id="example">
  <div class="row">
    <div class="col">
      1st col
    </div>
    <div class="col">
      2nd col
    </div>
    <div class="col">
      3rd col
    </div>
  </div>
  <div class="row">
    <div class="col">
      4th col
    </div>
    <div class="col">
      5th col
    </div>
  </div>
</div>

​

Answer 1

您只需选择适当的参数，并根据需要删除右边框和下边框...

https://www.codeply.com/go/9S36zcuDGM

/* remove from last col in each row */
#example .col:not(:last-child) {
  border-right-width: 0;
}

/* remove from cols in last row */
#example .row:not(:last-child) .col {
  border-bottom-width: 0;
}

或者，您可以在HTML标记中使用border utils (不理想)...

  <div class="row">
    <div class="col border border-right-0">
      1st col
    </div>
    <div class="col border border-right-0">
      2nd col
    </div>
    <div class="col border">
      3rd col
    </div>
  </div>