Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: