Làm cách nào để thêm một dòng giữa hai cột sử dụng hệ thống lưới khởi động Twitter

Question

Bố cục hai cột với một dòng ở giữa.

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

Answer 1

Tôi nghĩ rằng tôi có câu hỏi của bạn ngay ... này các mã dưới đây. Kiểu nội tuyến bên dưới chỉ để minh họa. Bạn áp dụng kiểu dáng của mình trong tệp 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> 

Mã trên phải xuất this image.

Answer 2

Tôi nghĩ bạn có thể đặt cột bên trái có chiều rộng 48%, phải là 48% chiều rộng và trung tâm 2% div có nền lặp lại. Bản thân bạn phải xử lý nó

Answer 3

Dựa trên câu trả lời rằng đó là rất giống nhau: https://stackoverflow.com/a/11299934/1478467

tôi sẽ đề nghị 2 góc để tấn công vấn đề này: biên giới hoặc nền liên tiếp. Đây là demo (jsfiddle).

Bên dưới mẫu cho tùy chọn nền, nhược điểm duy nhất là bạn không thực sự kiểm soát chiều rộng của đường trừ khi bạn sử dụng các hình nền phức tạp.

<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

Giải pháp của tôi sử dụng: trước khi đưa một yếu tố vị trí giữa các cột. Điều này không yêu cầu bất kỳ phần tử HTML nào nữa và sẽ chỉ được áp dụng cho các phần tử con. * Ngay tức thì của lớp .border-between. Điều này nên được áp dụng cho cùng một phần tử như .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

Dựa trên giải pháp @Ross Angus Tôi tìm thấy một cách để thích nghi với chiều cao. Chỉ cần đặt trên đầu trang của mỗi biên giới khác của mỗi cột.

.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

Mở rộng trên CSS do người dùng cung cấp2136179, bạn cũng có thể tạo đường viền dưới. Nó đòi hỏi phải sử dụng matchHeight nhưng có thể nhận được Bootstrap Grid của bạn trông giống như một bảng lưới. Check it out

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