Cách tốt nhất để đặt một đường thẳng đứng trong rãnh nhốt Twitter Bootstrap

Question

<div class="row-fluid"> 

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

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

</div> 

Tôi muốn đặt một đường thẳng đứng xuống giữa rãnh giữa hai cột này.

Dòng không phải là độ dài đầy đủ của các cột - vì vậy tôi không thể chỉ sử dụng đường viền.

Tôi đã thử thay đổi bố cục thành span6, span1, span5 và sử dụng cột span1 cho dòng, nhưng nó làm rối loạn không gian cho nội dung phù hợp của tôi.

Bất kỳ ý tưởng nào?

Answer 1

Nếu bạn có thể giả định rằng một trình duyệt hiện đại (hỗ trợ CSS 3) đang được sử dụng, bạn có thể sử dụng thuộc tính kích thước hộp (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) để ghi đè Bootstrap mặc định .span6.

Bạn cũng có thể muốn gửi kèm theo đây trong một truy vấn @media để tránh lạ khoảng cách bên trái khi trình duyệt được thay đổi kích cỡ để có chiều rộng nhỏ hơn ..

@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

Cám ơn những câu trả lời. Nhưng vấn đề không chỉ là một biên giới. Đường thẳng đứng chỉ dành cho một phần chiều dài của các cột.

Giải pháp của tôi là sử dụng định vị tuyệt đối cho dòng div dọc & Tôi đã phải từ bỏ các cột khoảng một vị trí:

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

Vấn đề duy nhất còn lại là trái -15px giả định một chiều rộng máng xối (twitter bootstrap đặt một lề trái trên khoảng thứ hai để có được máng xối) của một kích thước nhất định & với phản ứng twitter bootstrap này có thể thay đổi tùy thuộc vào độ phân giải màn hình. -15px an toàn nhưng không tập trung vào các thiết bị nhỏ hơn.