Verringerung führenden Abstand zwischen vertikalen und zweiten Feld in HTML

Question

Ich brauche etwas Hilfe, um das Problem in HTML zu lösen.

Ich habe eine vertikale Linie zwischen zwei Feldern erstellt, aber es gibt einen führenden Abstand zwischen der vertikalen Linie und dem zweiten Feld. Wie kann ich diese Leer- und Zeilenhöhe nach Texten mit HTML mit CSS reduzieren?

Hier ist der Code von CSS

.row.vertical-divider { 
    overflow: hidden; 
} 
.row.vertical-divider > div[class^="col-"] { 
    padding-bottom: 3px; 
    border-right: 1px solid #000; 

} 
.row.vertical-divider div[class^="col-"]:first-child { 
    border-left: none; 

} 
.row.vertical-divider div[class^="col-"]:last-child { 
    border-right: none; 
} 

Hier ist der Code, der HTML

<div class="row vertical-divider rightdiv2"> 
    <div class="col-xs-2">To</div> 
    <div class="col-xs-10">Username</div> 
</div> 

Ausgang ist: Vertical line between 2 fields

Answer 1

Versuchen Hinzufügen line-height: 1; zum übergeordneten Stil, wie folgt aus:

.row.vertical-divider { 
    overflow: hidden; 
    line-height: 1; 
} 

Auch für die Zukunft, Beispiele dafür, was Sie versucht haben, sind wirklich hilfreich, damit die Leute wissen, was versuchen zu vermeiden!

Edit:

Misunderstood Ihre Frage, es tut mir leid.

Ich glaube, das Problem ist, dass Ihr Text in Ihrem col-xs-10 zentriert ist. Sie könnten versuchen, es auszurichten oder eine andere Bootstrap-Spalte mit einer kleineren Breite daneben hinzuzufügen. Siehe jsfiddle:

https://jsfiddle.net/rewxz6xu/

Verwenden Polsterung wie ich Raum zu schaffen haben, oder wie ich schon sagte, fügen Sie eine neue Spalte-xs-? rechts neben dem Feld Benutzername

Answer 2

dieses CSS Versuchen:

.row.vertical-divider { 
    overflow: hidden; 
} 
.row.vertical-divider > div[class^="col-"] { 
    padding-bottom: 3px; 
    //border-right: 1px solid #000; 
} 
.row.vertical-divider div[class^="col-"]:first-child { 
    border-left: none; 

} 
.row.vertical-divider div[class^="col-"]:last-child { 
    border-right: none; 
} 
.col-xs-2 { 
    border-right: 1px solid red; 
} 

Answer 3

Wenn ich Sie richtig verstehe, können Sie einfach den HTML-Code wie folgt ändern (eine andere Klasse für das zweite Element verwendet wird):

<div class="row vertical-divider rightdiv2"> 
    <div class="col-xs-2">To</div> 
    <div class="col-xs-2">Username</div> 
</div>