Нижняя граница столбца начальной загрузки выходит за столбец из-за отрицательной границы строки и заполнения столбца

Question

Я пытаюсь добавить нижнюю границу в столбец начальной загрузки, но она выходит за пределы столбца div из-за отрицательного поля строки и заполнение колонки бутстрапа. Пожалуйста, смотрите ниже:

Есть ли способ, я могу предотвратить границу выходить на улицу и показать только в пределах содержимого столбца, как показано ниже?

<div class="container"> 
    <div class="row"> 

    <div class="col-md-12 add-border"> 
     A quick brown fox jumps over the lazy dog. 
    </div> 

    </div> 
</div> 

Answer 1

Применить отступы: 0 ваших дивы вы хотите иметь границу (следующий предполагает 3px границы ширину - изменить его в соответствии с):

.add-border{ 
    padding:0; 
    border-bottom:3px solid #000; 
} 

если вы должны только влиять на прописку слева и справа (но не сверху и снизу), то вы можете использовать следующее:

.add-border{ 
    padding-left:0; 
    padding-right:0; 
    border-bottom:3px solid #000; 
} 

Answer 2

Попробуйте это и установите границу, используя after псевдоэлемент.

.add-border:after { 
    content:''; 
    width:270px; 
    height:5px; 
    background:black; 
    position:absolute; 
    left:13px; 
    top:24px; 
}