在 bootstrap cols 周围添加一致的 1px 边框答案

【问题标题】：adding consistent 1px borders around bootstrap cols在 bootstrap cols 周围添加一致的 1px 边框
【发布时间】：2018-02-14 23:20:31
【问题描述】：

有没有一种干净的、仅 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>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

你只需要选择合适的cols，根据需要去掉border-right和border-bottom...

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>

【讨论】：