Der beste Weg, um eine vertikale Linie in den Twitter Bootstrap Rinne zu setzen

Question

<div class="row-fluid"> 

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

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

</div> 

Ich möchte eine vertikale Linie in der Mitte der Rinne zwischen diesen beiden Spalten.

Die Linie ist nicht die volle Länge der Spalten - also kann ich nicht einfach einen Rahmen verwenden.

Ich habe versucht, mein Layout in span6, span1, span5 und mit der span1-Spalte für die Zeile zu ändern, aber es vermasselt den Platz für meinen richtigen Inhalt.

Irgendwelche Ideen?

Answer 1

Wenn Sie davon ausgehen, dass ein moderner Browser (einer, der CSS 3 unterstützt) verwendet wird, können Sie die Standardgröße (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) verwenden, um den Standard-Bootstrap .span6 zu überschreiben.

Sie können auch diese in einer @media Abfrage einschließen möchten seltsame linksseitige Abstand zu vermeiden, wenn der Browser auf eine geringere Breite der Größe verändert wird ..

@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

Vielen Dank für die Antworten. Aber das Problem war nicht nur eine Grenze. Die vertikale Linie muss nur für einen Teil der Länge der Säulen stehen.

Meine Lösung war, die absolute Positionierung für die vertikale Linie div & ich eine Position, um die Spannweite Spalte geben musste zu verwenden:

<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> 

Die einzige verbleibende Problem ist, dass die -15px links eine Stegbreite übernimmt (twitter Bootstrap legt einen linken Rand auf den zweiten Bereich, um den Gutter zu erhalten) einer bestimmten Dimension & mit Antwort twitter Bootstrap kann dies je nach Bildschirmauflösung ändern. -15px ist sicher, wird aber nicht auf kleinere Geräte zentriert.