如何使用Twitter Bootstraps網格系統在兩列之間添加一條線

Question

雙列布局，中間有一條線。

[      ] | [      ] 
[      ] | [      ] 
[      ] | [      ] 
[  Left Column  ] | [ Right Column  ] 
[      ] | [      ] 
[      ] | [      ] 
[      ] | [      ] 
[      ] | [      ] 

Answer 1

我覺得我得到了你的問題的權利......這下面的代碼。下面的內聯樣式僅用於說明。你在CSS文件中應用你的樣式。

<div class="container"> 
    <div class="row-fluid"> 
     <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;"> 
      <p>Some Contents Here...</p> 
     </div> 

     <div class="span6"> 
      <p>Some Contents Here...</p> 
     </div> 
    </div> 
</div> 

以上代碼應輸出this image。

Answer 2

我認爲你可以設置左欄是48％的寬度，右是48％的寬度和重複背景的中心2％div。你必須自己處理

Answer 3

基於這個問題的答案非常相似：https://stackoverflow.com/a/11299934/1478467

我建議2角攻擊這個問題：邊界或行背景。這裏是demo (jsfiddle)。

在背景選項的示例下面，唯一的缺點是除非使用複雜背景，否則不能真正控制線條的寬度。

<div class="row myBackground"> 
     <div class="span6">span6</div> 
     <div class="span6">span6</div> 
</div> 

/* Put here the background (color, images, etc.) that you want between the columns */ 
.row.myBackground { background: #F00; } 
/* This is the column background, for example white as the page background */ 
.row.myBackground > [class*="span"] { background: blue; } 

Answer 4

我的解決方案使用：前放列之間的定位元素。這不需要更多HTML元素，只會應用於.border-between類的直接子元素.col- *元素。這應該應用於與.row相同的元素。

HTML

<div class="row border-between"> 
    <p class="col-sm-6">This column does not have a border, because it's a first child.</p> 
    <p class-"col-sm-6">This column has a border to the left</p> 
</div> 

CSS

.border-between > [class*='col-']:before { 
    background: #e3e3e3; 
    bottom: 0; 
    content: " "; 
    left: 0; 
    position: absolute; 
    width: 1px; 
    top: 0; 
} 

.border-between > [class*='col-']:first-child:before { 
    display: none; 
} 

Answer 5

基於@Ross安格斯解決辦法，我找到了一種方法，以適應高度。只需將每列的邊界放在彼此的頂部。

.grid--borderBetween > [class*='col-']:before, 
.grid--borderBetween > [class*='col-']:after { 
    background: #b2b2b2; 
    bottom: 0; 
    content: " "; 
    position: absolute; 
    width: 1px; 
    top: 0; 
} 
.grid--borderBetween > [class*='col-']:before { 
    left: 0; 
} 
.grid--borderBetween > [class*='col-']:after { 
    right: -1px; 
} 
.grid--borderBetween > [class*='col-']:first-child:before, 
.grid--borderBetween > [class*='col-']:last-child:after { 
    display: none; 
} 

Answer 6

擴大對user2136179提供的CSS，你也可以做底邊框。它需要使用matchHeight，但可以使Bootstrap Grid看起來像表格。 Check it out

// See the rest on codepen.io 
$(".border-bottom").children("div").matchHeight();