Thông qua Bootstrap, làm cách nào tôi có thể thêm bộ chia dọc trong giếng?

Question

Tôi đang sử dụng bootstrap để vẽ một giếng. Trong giếng này, tôi tạo hai số span6 và muốn vẽ một đường chia dọc giữa hai cột này. Làm thế nào tôi có thể đạt được mục tiêu của mình?

Answer 1

Vẽ đường viền trái trên tất cả, nhưng cột đầu tiên:

.well [class^="span"] + [class^="span"] { 
    margin-left: -1px; /* compensate border width */ 
    border-left: 1px solid #e3e3e3; 
} 

---

Ngoài ra, cột CSS có thể được sử dụng (tiền tố bắt buộc):

.well.col { 
    columns: 2; 
    column-gap: 20px; 
    column-rule: 1px solid #e3e3e3; 
} 

Nếu bạn chưa bao giờ sử dụng nó trước đây, bạn nên kiểm tra tutorial on CSS columns của tôi.

Answer 2

Bạn luôn có thể sử dụng thẻ HTML <hr>.

Answer 3

Dấu ngắt câu trả lời được chọn nếu các phần tử của bạn chiếm toàn bộ chiều rộng vì đường viền thêm 1px quá nhiều! Để chống lại điều này, bạn có thể điều chỉnh lề để chiếm biên giới.

.line-right { 
    margin-right: -1px; 
    border-right: 1px solid black; 
} 

Nếu bạn muốn có đường viền lớn hơn, hãy chắc chắn tính toán nó ở lề!