Как сделать hr дольше между cols?

Question

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

<div class="col-md-2 col-xs-12"> 
     <div class="col-md-2 icon"> 

     <i class="fa fa-bandcamp" aria-hidden="true"></i> 
     </div> 
     <div class="col-md-10 height hidden-xs"> 
     <p>mycomp account number</p><span class="text">2000299999940</span> 
     </div> 
     <div class="visible-xs height"> 
     <hr> 
     <p class="col-xs-5">mycomp account number:</p> 
     <p class="col-xs-7">2000299999940</p> 
     </div> 
</div> 

<div class="col-md-1"> 
     <hr class="line" /> 
</div> 

CSS:

.line { 
    width: 200px; 
    height: 3px; 
    background-color: #dadada; 
    margin-right:40px; 
    } 

Из начальной загрузки columnstructure есть поля, связанные, но как Я делаю линию без всего пространства, т. Е. Расширяя ее? Codepen here

Answer 1

хорошо в случае, если вы хотите игнорировать отступы по умолчанию и поле в загрузчике сделать класс в CSS файл, как

.no-padding-margin 
{ 
padding:0px; 
margin: 0px; 
} 

, а затем применить этот класс для ваших бутстраповских колонок, как

<div class="col-md-2 col-xs-12 no-padding-margin"> 
     <div class="col-md-2 icon"> 

     <i class="fa fa-bandcamp" aria-hidden="true"></i> 
     </div> 
     <div class="col-md-10 height hidden-xs"> 
     <p>mycomp account number</p><span class="text">2000299999940</span> 
     </div> 
     <div class="visible-xs height"> 
     <hr> 
     <p class="col-xs-5">mycomp account number:</p> 
     <p class="col-xs-7">2000299999940</p> 
     </div> 
</div> 

<div class="col-md-1 no-padding-margin"> 
     <hr class="line" /> 
</div> 

Answer 2

ну как я понимаю, вы просто хотите, чтобы ваша линия была длиннее. , так почему бы вам не удалить прокладки из столбца, в котором находится линия, а также добавить width:100% на .line, если хотите.

код:

.line { 
    width: 100%; 
    height: 3px; 
    background-color: #dadada; 
} 
.col-md-1 { 
    padding-left:0; 
    padding-right:0; 
}