Twitter Bootstrap olukta dikey çizgi koymanın en iyi yolu

Question

<div class="row-fluid"> 

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

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

</div> 

Bu iki sütun arasındaki oluğun ortasına dikey bir çizgi koymak istiyorum.

Satır, sütunların tam uzunluğu değil - bu yüzden yalnızca kenarlık kullanamıyorum.

Yerleşimimi span6, span1, span5 olarak değiştirmeyi ve hat için span1 sütununu kullanmayı denedim, ancak doğru içeriğimin alanını karıştırıyor.

Herhangi bir fikrin var mı?

Answer 1

Modern bir tarayıcının (CSS 3'ü destekleyen bir tane) kullanılmakta olduğu varsayımıyla devam ederseniz, varsayılan Bootstrap .span6'u geçersiz kılmak için kutu boyutlandırma özelliğini (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) kullanabilirsiniz. için

Ayrıca, tarayıcı daha küçük bir genişliğe boyutlandırılır garip sol taraftaki boşluğu önlemek için bir @media sorgusunda bu içine isteyebilirsiniz

..

@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

Teşekkür cevaplar. Fakat sorun sadece bir sınır değildi. Dikey çizgi, sütunların uzunluğunun sadece bir kısmı için olmalıdır.

Çözümümün bir pozisyon yayılma sütun vermek zorunda dikey çizgi div & için mutlak konumlandırma kullanmaktı:

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

kalmış tek sorun -15px sol oluk genişliği (kabul olmasıdır heyecan bootstrap, belirli bir boyuttaki & belirli bir boyuttaki olukları almak için sol tarafa bir sol boşluğu koyar, bu da ekran çözünürlüğüne bağlı olarak değişebilir. -15px güvenlidir, ancak daha küçük cihazlarda ortalanmayacaktır.