Come aggiungere una linea tra due colonne utilizzando il sistema di griglia di Twitter Bootstraps

Question

Layout a due colonne con una linea nel mezzo.

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

Answer 1

Penso che ho avuto la tua domanda giusta ... questo i codici sottostanti. Lo stile in linea qui sotto è solo per illustrazione. Applica il tuo styling nel file 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> 

Il codice di cui sopra deve fornire this image.

Answer 2

Penso che si può impostare la colonna di sinistra è la larghezza del 48%, a destra è del 48% la larghezza e il centro 2% div con sfondo ripetuta. È necessario gestire da soli è

Answer 3

Sulla base di questa risposta che è molto simile: https://stackoverflow.com/a/11299934/1478467

Vorrei suggerire 2 angoli per attaccare questo problema: le frontiere o di sfondo fila. Ecco lo demo (jsfiddle).

Sotto un esempio per l'opzione sfondo, l'unico lato negativo è che non si controlla realmente la larghezza della linea a meno che non si utilizzino sfondi complessi.

<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

mia soluzione utilizza la: prima di mettere un elemento posizionato tra le colonne. Questo non richiede più alcun elemento HTML e verrà applicato solo agli elementi child .col- * immediati della classe .border-between. Questo dovrebbe essere applicato allo stesso elemento di .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

Sulla base di soluzione @Ross Angus ho trovato un modo per adattare l'altezza. Basta posizionare uno sopra l'altro i bordi di ogni colonna.

.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

Espansione sul CSS fornito dall'utente2136179, è inoltre possibile eseguire i bordi inferiori. Richiede l'utilizzo di matchHeight ma può far apparire la griglia di avvio come una griglia di tabella. Check it out

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