想象一下,您正在使用 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>
关于css - 防止响应列出现双边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55649508/