>想象一下,你正在使用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>
运行代码时,会看到"双"边框。如果我使用第 n 个子选择器,我必须计算每个断点,因为在特定断点上,它每行显示不同的单元格。你如何解决它?
你可以这样处理它: https://www.codeply.com/go/u5dCBDg1he
.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
添加上边框和左边框,然后为每个cell
添加右边距和下边距。也可以使用边框实用程序类完成此操作。
<div class="row no-gutters border-left border-top">
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
<div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
</div>
您可以将 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>
使用较少的单元格,您可以尝试使用伪元素进行此破解:
.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>