Via Bootstrap，如何在井中添加垂直分隔線？

我使用bootstrap來繪製井。在這個井裏，我創建了兩個span6，並希望在這兩列之間繪製垂直分隔線。我怎樣才能實現我的目標？Via Bootstrap，如何在井中添加垂直分隔線？

2012-10-08 waitingkuo

利用所有的左邊界，但第一欄：

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

另外，也可以使用CSS列（必要的前綴）：

.well.col { 
    columns: 2; 
    column-gap: 20px; 
    column-rule: 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

只要您只實現單行佈局 - 可以使

的大小很大但寬度非常小，結果是一條垂直線：

– LucianNovo

可能是可能的，但肯定無效。 – Dementic

如果你的元素佔據了整個寬度，所選的答案就會中斷，因爲邊框會增加1px太多！爲了解決這個問題，你可以調整邊距來考慮邊界。

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

如果你想要一個更大的邊框，只要一定要在邊緣考慮它！

2013-06-19 01:30:12

@PavloMykhalov我也會測試它，出於某種原因在更改邊距時，它並不總是有效。它可能涉及填充或邊距引導類自動添加 –

你是對的。我應該仔細檢查一下。 – Pavlo

回答