Làm cách nào để tạo bố cục thanh bên cố định bằng Bootstrap 4?
Tôi đang cố gắng tạo bố cục như ảnh chụp màn hình bằng Bootstrap 4 nhưng tôi đang gặp một số vấn đề với việc cố định thanh bên và đạt được bố cục này cùng một lúc.
Đi với một ví dụ cơ bản:
<div class="container">
<div class="row">
<div class="col-m-4" id="sticky-sidebar">
Sidebar
</div>
<div class="col-m-8" id="main">
Main Area
</div>
</div>
</div
Nó có thể làm cho bố cục này nhưng mọi thứ trở nên khó khăn khi tôi tuyên bố:
.sidebar {
position: fixed // or absolute
}
Khi tôi làm cho sidebar dính, các chính div bắt đầu xuất hiện phía sau thanh bên thay vì bên cạnh nó. Tất nhiên nó có thể tuyên bố một số lợi nhuận và đẩy nó trở lại vị trí ban đầu của nó nhưng nó làm cho mọi thứ phức tạp để đáp ứng.
Tôi cảm thấy như tôi đang thiếu một cái gì đó, tôi đọc tài liệu Bootstrap 4 nhưng tôi không thể tìm thấy một cách đơn giản để đạt được bố cục này.
Nếu bạn thêm một số ipsum lorem nội dung sidebar của bạn, bạn có thể thấy rằng vấn đề ban đầu của tôi được tái tạo trong đoạn này. Bởi vì chúng tôi đang tuyên bố một vị trí cố định, thanh bên dừng việc tôn trọng hệ thống lưới. – cinnaroll45
Tôi đã chỉnh sửa mã đã thêm 'chiều rộng tối đa: 20%' vào thanh bên – GvM
Có, việc khai báo chiều rộng tối đa cho vùng chứa sẽ khắc phục sự cố. Cảm ơn! – cinnaroll45