htmlの垂直線と第2フィールドの間の先頭のスペースを減らす

Question

HTMLの問題を解決するにはいくつかの助けが必要です。

2つのフィールドの間に縦線を作成しましたが、縦線と第2フィールドの間に先行するスペースがあります。 CSSでHTMLを使用するテキストに応じて、これらのスペースと行の高さをどのように減らすことができますか？ここで

が

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

出力されたHTMLのコード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; 
} 

のコードです： Vertical line between 2 fields

Answer 1

を増やしてみてください行の高さ：1。親スタイルに、次のように：今後の参考のためにも

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

、あなたが試したものの例は、人々がしようとして避けるために知っているので、本当に便利です！

編集：

は申し訳ありませんが、あなたの質問を誤解。

私はあなたのテキストがあなたのcol-xs-10を中心にしていると考えています。それを整列させたままにするか、幅の狭い横に別のブートストラップ列を追加してみてください。私はスペースを作成する必要がありますよう

https://jsfiddle.net/rewxz6xu/

使用パディング、または私が言ったように、新しいCOL-XS-を追加します。jsfiddleを参照してください？ Usernameフィールドの右側に表示されます。

Answer 2

はこの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; 
} 
.col-xs-2 { 
    border-right: 1px solid red; 
} 

Answer 3

私が正しくあなたを理解していれば、あなたは、単に（第2要素のための別のクラスを使用して）このようなHTMLを変更することができます。

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