引导标签边框重叠答案

【问题标题】：bootstrap label borders overlapping引导标签边框重叠
【发布时间】：2020-11-13 06:08:48
【问题描述】：

我有如下的 div，每个 div 在 labelStyle 类中定义了 1px 的边框。

.labelStyle {
    text-align: left; 
    padding: 0px; 
    font-weight: 0px;
    font-size: 8px;
    border: 1px solid;
    margin-bottom: 0;
    border-collapse: collapse;
}


<div class="col-sm-6" style="padding-left: 0px;padding-right: 2px;">
    <div class="row">
        <label class="col-sm-6 labelStyle">Name</label>
        <label class="col-sm-6 labelStyle">{{name}}</label>
    </div>
    <div class="row">
        <label class="col-sm-6 labelStyle">Number</label>
        <label class="col-sm-6 labelStyle">{{num}}</label>
    </div>
    <div class="row">
        <label class="col-sm-6 labelStyle">Zip</label>
        <label class="col-sm-6 labelStyle">{{zip}}</label>
    </div>  
</div>

当它被渲染时，因为相邻的标签都定义了边界，它们看起来更暗。我想在这里使用border-collapse:collapse sortof 功能。我尝试使用border-collapse，但它没有用。基本上，每个标签都应该定义顶部和侧边边框，而不是底部。但是，最后一个标签应定义底部边框。这样做的最佳方法是什么。这些元素在 DIV 内部，而不是表格。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

border-collapse CSS 属性设置<table> 内的单元格是否有共享或分开的边界。 (MDN)

由于您不处理表格，您可以将margin-top 设置为-1px，这样它将覆盖占用 1px 的重复边框（如果您更改该更改 margin-top 也）。

div {border: 1px solid black; margin-top: -1px;}

<div>bla bla bla 1</div>
<div>bla bla bla 2</div>
<div>bla bla bla 3</div>
<div>bla bla bla 4</div>
<div>bla bla bla 5</div>

【讨论】：