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?Thông qua Bootstrap, làm cách nào tôi có thể thêm bộ chia dọc trong giếng?
Trả lời
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.
Bạn luôn có thể sử dụng thẻ HTML <hr>
.
Miễn là bạn chỉ triển khai bố cục hàng đơn - có thể tạo kích thước lớn hơn
nhưng chiều rộng rất nhỏ, kết quả là đường thẳng đứng:
– LucianNovo
có thể có thể, nhưng chắc chắn không hợp lệ. – Dementic
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ề!
@PavloMykhalov Tôi cũng sẽ thử nghiệm nó, vì một số lý do khi thay đổi lề trái, nó không phải lúc nào cũng hoạt động. Nó có thể liên quan đến lớp đệm hoặc lớp bootstraps tự động thêm –
Bạn nói đúng. Tôi nên kiểm tra lại điều đó. – Pavlo
Điều này làm hỏng bố cục cho tôi –
tôi tin rằng nó phá vỡ nó vì thêm một đường viền cho một lượng nhỏ chiều rộng, nếu trước đây bạn có các phần tử chiếm toàn bộ chiều rộng của trang, thậm chí 1px sẽ đẩy nó quá xa và trả lại một cái gì đó xuống –