bootstrap 4 границы перекрытия

Question

Я использую bootstrap 4 мой проект. ниже мой код

.form-info-tab {
     border: 1px solid #ccc;
     border-collapse: separate;
     border-spacing: 0px;
     padding:5px;
     text-align:center;
}

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

<span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
   <i class="fas fa-hourglass-half"></i>
   <label class="modalLables">One </label>
</span>
    
<span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
   <i class="fas fa-hourglass-half"></i>
   <label class="modalLables">Two</label>
</span>

Моя проблема в том, что правые границы перекрываются. как мне это остановить

ниже моя проблема. пожалуйста, проверьте изображение

Answer 1

Вы можете удалить правую границу из каждой вкладки , кроме последней типа. Селектор :last-of-type применяется к последнему элементу своего типа среди братьев и сестер. :not переворачивает селектор, поэтому :not(:last-of-type) будет соответствовать всему, кроме последнего элемента.

В качестве альтернативы вы можете go справа налево, удаляя левую границу из каждого элемента, кроме первого один также. Тогда вам потребуется селектор :first-of-type.

.form-info-tab {
     border: 1px solid #ccc;
     border-collapse: separate;
     border-spacing: 0px;
     padding:5px;
     text-align:center;
}

.form-info-tab:not(:last-of-type) {
     border-right: none;
}

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

<!-- this div is just a wrapper to add some padding around tabs -->
<!-- it's not necessary, just for demonstration -->
<div class="p-3">
    <span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
       <i class="fas fa-hourglass-half"></i>
       <label class="modalLables">One </label>
    </span>
        
    <span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
       <i class="fas fa-hourglass-half"></i>
       <label class="modalLables">Two</label>
    </span>
</div>