ブートストラップ経由で、ウェルに垂直ディバイダを追加するにはどうすればよいですか？

私は井戸を描くためにブートストラップを使用しています。この井戸では、私は2つのspan6を作成し、これらの2つの列の間に垂直の区切り線を描画したいと考えています。目標を達成するにはどうすればいいですか？ブートストラップ経由で、ウェルに垂直ディバイダを追加するにはどうすればよいですか？

2012-10-08 waitingkuo

すべての左の境界線を描画しますが、最初の列：

.well.col { 
    columns: 2; 
    column-gap: 20px; 
    column-rule: 1px solid #e3e3e3; 
}

あなたがそれを使用したことがない場合：別の方法として、CSSの列は（接頭辞が必要）を使用することができる

.well [class^="span"] + [class^="span"] { 
    margin-left: -1px; /* compensate border width */ 
    border-left: 1px solid #e3e3e3; 
}

以前は、tutorial on CSS columnsをチェックしてください。

2012-10-08 11:23:46 Pavlo

これは私のためのレイアウトを破る –

これは、境界線を追加すると、ページの幅全体を占める場合、1pxがあまりにも遠すぎて何かをバウンスするよりも、幅が小さいことが追加されたためです。 –

いつでもHTML <hr>タグを使用できます。

2012-10-08 09:36:03 Yuval

見える

は水平線用です。どのように垂直線を描くことができますか？ – waitingkuo

1行レイアウトしか実装していない限り、

のサイズを大きくすることはできますが、幅は非常に小さくなります。結果は縦線です。

– LucianNovo

が可能かもしれませんが、確かに無効です。 – Dementic

ボーダーが1pxをあまりにも多く追加するため、要素が幅全体を占める場合、選択したアンサーが壊れます。これに対処するために、境界を考慮してマージンを調整することができます。

.line-right { 
    margin-right: -1px; 
    border-right: 1px solid black; 
}

大きなボーダーをご希望の場合は、マージンを考慮してください。

2013-06-19 01:30:12

@PavloMykhalov余白を変更するとき何らかの理由で私もそれをテストするだろう - それはいつも働いていなかった。それはパディングやマージンブートストラップのクラスに自動的に追加することができます –

あなたは正しいです。私はそれを二重にチェックすべきです。 – Pavlo

答えて