Najlepszy sposób na umieszczenie pionowej linii w rynnie Bootstrap na Twitterze

Question

<div class="row-fluid"> 

    <div class="span6"> Some content </div> 

    <div class="span6"> Some content </div> 

</div> 

Chcę umieścić pionową linię w środku rynny pomiędzy tymi dwoma kolumnami.

Linia nie jest pełną długością kolumn - więc nie mogę po prostu użyć obramowania.

Próbowałem zmienić mój układ na span6, span1, span5 i używając kolumny span1 dla linii, ale mes meswa się przestrzeń dla mojej prawej zawartości.

Wszelkie pomysły?

Answer 1

Jeśli możesz użyć założenia, że ​​używana jest nowoczesna przeglądarka (obsługująca CSS 3), możesz użyć właściwości box-size (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp), aby zastąpić domyślny Bootstrap .span6.

Można też dołączyć to w zapytaniu @media uniknięcia dziwne odstępy z lewej strony, gdy przeglądarka jest zmieniany na mniejszej szerokości ..

@media (min-width:979px) { 
    .span6:not(:first-child) { 
    border-left: 1px solid #ddd; 
    padding-left: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
} 

Bootply

Answer 2

Dzięki za odpowiedzi. Ale problemem nie była tylko granica. Linia pionowa musi być tylko dla części długości kolumn.

Proponowane rozwiązanie było wykorzystanie pozycjonowania absolutnego do pionowej linii div & miałem otrzymując kolumnę rozpiętości ustawienia:

<div class="row-fluid"> 

    <div class="span6"> Some content </div> 

    <div class="span6" style="position:relative"> 
     <div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div> 
     Some content 
    </div> 

</div> 

Jedyne problemem jest to, że -15px lewej przyjmuje szerokość rynny (twitter bootstrap kładzie lewy margines na drugim przęśle, aby uzyskać rynnę) o pewnym rozmiarze & z bootstrapem odpowiedzi twitter, który może się zmieniać w zależności od rozdzielczości ekranu. -15px jest bezpieczny, ale nie będzie całkowicie wyśrodkowany na mniejszych urządzeniach.