Jak dodać linię między dwiema kolumnami za pomocą systemu siatki Bootstraps na Twitterze

Question

Układ dwóch kolumn z linią pośrodku.

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

Answer 1

Chyba mam pytanie rację ... to jeden z poniższych kodów. Poniższy styl jest po prostu dla zilustrowania. Stosujesz styl w pliku 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> 

Powyższy kod powinien wypisać kod this image.

Answer 2

Myślę, że możesz ustawić lewą kolumnę ma szerokość 48%, prawa jest szerokość 48%, a środek 2% div z powtarzającym się tłem. Musisz sobie poradzić

Answer 3

oparciu o tę odpowiedź, która jest bardzo podobna: https://stackoverflow.com/a/11299934/1478467

Proponuję 2 kąty do ataku na ten problem: granice lub wiersza tła. Oto demo (jsfiddle).

Poniżej próbki dla opcji tła jedyną wadą jest to, że tak naprawdę nie kontrolujesz szerokości linii, chyba że używasz skomplikowanych tła.

<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

Moje rozwiązanie używa: przed położyć elementu pozycjonowanego pomiędzy kolumnami. To nie wymaga żadnych dodatkowych elementów HTML i zostanie zastosowane tylko do bezpośrednich potomnych elementów .col- * klasy .border-between. To powinno być zastosowane do tego samego elementu co .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

oparciu o rozwiązania @Ross Angus znalazłem sposób na dostosowanie wysokości. Po prostu umieszczając na wierzchu każdej innej granicy każdej kolumny.

.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

Rozszerzając CSS dostarczony przez użytkownika2136179, można również wykonywać dolne krawędzie. Wymaga użycia matchHeight, ale może sprawić, że twoja siatka Bootstrap będzie wyglądać jak siatka na stole. Check it out

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