防止响应列出现双边框

Question

想象一下您正在使用Bootstrap 4并打印一些单元格。单元号是无法预测的。

.cell {
  border: 1px solid black;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

运行代码时，您会看到“双”边框。如果使用nth-child选择器，我必须计算每个断点，因为在特定断点处，每行显示不同的单元格。您如何解决？

Answer 1

您可以将border-right / border-bottom与元素一起使用，并将border-top / border-left与容器一起使用：

.cell {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.row {
  border-top: 1px solid black;
  border-left: 1px solid black;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

使用较少的单元格，您可以尝试使用伪元素进行此 hack

：

.cell {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position:relative;
  z-index:1;
}
.row {
  border-left: 1px solid black;
  margin:10px;
  overflow:hidden; /*hide the overflow*/
  padding-top:1px; /*for the top border*/
}


/*top border for all*/
.cell:first-child:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  height:1px;
  width:100vw;
  background:#000;
}
/*hide the unwated top border in case of few cells*/
.cell:last-child:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:calc(100% + 1px);
  height:1px;
  width:100vw;
  background:#fff;
}

/*avoid issue with stacking context and 
be sure the cells are on the top of the pseudo element*/
.cell:first-child,
.cell:last-child {
  z-index:auto;
}

/*for one cell*/
.cell:first-child:last-child {
  border-top:1px solid;
}

.cell:first-child:last-child:before {
  content:none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

Answer 2

您可以这样处理：https://www.codeply.com/go/u5dCBDg1he

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-group ">
  <div class="form-group has-feedback ">
    <input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
    <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick">Text to see this button</span>
  </div>
</div>

这会在整个.row { border-style: solid; border-color: black; border-width: 1px 0 0 1px; } .cell { border-color: black; border-style: solid; border-width: 0 1px 1px 0; } 上添加上下边框，然后在每个row上添加右下边框。您也可以使用border实用程序类来完成此操作。

cell

Answer 3

您可以尝试

.cell {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.cell:nth-child(n+5) {
    border-top: none;
}
.cell:first-child, .cell:nth-child(5n) {
   border-left: 1px solid black;
}

这是一个演示https://jsfiddle.net/gLjpz5fu/