css - 在 Bootstrap 列周围添加一致的 1px 边框

Question

是否有一种干净的、纯 CSS 的方法可以在列周围添加一致的 1px 边框，而当两个并排时，你没有 2px 边框？请注意外边缘如何具有 1 像素边框，而内边框是双倍宽度，因为它们是并排的。基本上，我想要表格单元格边框，但具有网格的响应能力。

#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

您只需选择适当的列，并根据需要删除 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;
}

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

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