Thanh điều hướng bootstrap không chiếm toàn bộ chiều rộng
|
Ngay trong khoảng thời gian tôi đang phát triển mã cho Thanh điều hướng siêu đơn giản mà tôi đã viết cách đây một thời gian, một người bạn đã đến gặp tôi với một vấn đề thú vị. Anh ấy cần một thanh điều hướng ngang giống như thanh tôi đang tạo, với những thay đổi sau Show
Bản phác thảo dưới đây phác thảo khái niệm thiết kế cơ bản CSSDeck khuyên dùng Hello Ivy để tự động hóa miễn phí quy trình làm việc và quản lý dự án của bạn. Tìm hiểu thêm Bạn tôi đã tìm thấy một số mã ở nơi khác làm những gì anh ấy muốn, nhưng nó yêu cầu hai div ngoài danh sách điều hướng để thực hiện phép thuật định tâm của nó. Anh ấy muốn biết liệu tôi có thể làm tốt hơn không Hướng dẫn này là kết quả của thử thách đó HTMLTôi đã có thể giảm số lượng div bổ sung cần thiết xuống còn một. Đáng buồn thay, tôi không nghĩ rằng có thể làm được điều này nếu không có ít nhất một div bổ sung — hoặc chuyển sang JavaScript thay vì hoàn toàn dựa vào CSS Nếu bạn đã quen thuộc với mã cho Thanh điều hướng siêu đơn giản, bạn sẽ thấy nó gần như giống hệt nhau, ngoại trừ việc tôi đã bọc thẻ ul trong div và chuyển ID “nav” sang div đó CSSDeck khuyên dùng Hello Ivy để tự động hóa miễn phí quy trình làm việc và quản lý dự án của bạn. Tìm hiểu thêm Mã điều hướng này phải được đặt bên ngoài vùng chứa nội dung được căn giữa của bạn để cho phép chúng tôi kéo dài mã này ra toàn bộ chiều rộng của cửa sổ trình duyệt trong CSS của chúng tôi Nói chung, tôi nghĩ rằng đây là một lượng mã có thể chấp nhận được cho một thanh điều hướng CSSMột lần nữa, tất cả những gì tôi đã làm ở đây là lấy CSS của thanh điều hướng trước đó và sửa đổi nó một chút. Kết quả dưới đây #nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; }
#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }Div #nav của chúng tôi được kéo dài tới 100% cửa sổ trình duyệt và trôi sang trái. “phao. left” có vẻ hơi lạ, bởi vì chúng tôi không muốn bất cứ điều gì bao quanh thanh điều hướng của chúng tôi Đây là một mẹo nhỏ tận dụng cách hoạt động của float. Nếu một vùng chứa không chứa gì ngoài phần tử nổi, thì vùng chứa đó sẽ thu gọn xuống độ cao bằng 0, vì phần tử nổi sẽ đưa nó ra khỏi luồng tài liệu thông thường. Đó là, trừ khi container cũng được thả nổi. Sau đó, đột nhiên, thùng chứa của chúng tôi chỉ thu gọn lại bằng kích thước của phao chứa Tại sao nó lại quan trọng? . Nếu #nav không nổi, nó sẽ thu gọn về độ cao bằng 0, làm cho nền và đường viền của chúng ta trở nên vô hình Tiếp theo, chúng tôi đã cung cấp cho “#nav ul” một chiều rộng cố định và sử dụng thủ thuật căn lề tự động để căn giữa nó. Chiều rộng ở đây là rất quan trọng. bạn muốn nó có cùng chiều rộng với vùng nội dung được căn giữa của bạn. Trong ví dụ này, đó là 800 pixel Tôi đang sử dụng một lớp giả để tạo hiệu ứng thú vị ở đây. Các ". lớp giả con đầu tiên” áp dụng cho bất kỳ phần tử nào là phần tử con đầu tiên trong phần tử cha của nó. Trong trường hợp của chúng tôi, quy tắc này là tìm chữ “li” đầu tiên trong chữ “ul” gốc của chúng tôi. Sau đó, chúng tôi sẽ áp dụng đường viền cho bên trái của thẻ neo bên trong. Không có nó, phần tử đầu tiên của chúng ta sẽ không có đường viền bên trái như những phần tử khác dường như có. Mặc dù về mặt kỹ thuật, chúng tôi có thể làm điều đó với một lớp hoặc ID trên phần tử đầu tiên, nhưng tôi nghĩ giải pháp này thanh lịch hơn một chút Phần còn lại của CSS giống với phần trong thanh điều hướng ngang đơn giản của chúng tôi và chủ yếu là trình bày. Bạn có thể tùy chỉnh màu sắc, phần đệm, di chuột và mọi thứ khác để biến thanh điều hướng thành của riêng bạn Bạn có thể thấy mã này đang hoạt động ở đây. Hy vọng rằng những người khác sẽ thấy giải pháp này hữu ích như bạn tôi đã làm Trong Bootstrap 4, NavBar là một thành phần thiết yếu cho mục đích menu. NavBar chứa rất nhiều mục như văn bản, văn bản liên kết, vô hiệu hóa liên kết, nút thả xuống, biểu mẫu, v.v. Để làm cho các mục con thả xuống thành toàn chiều rộng có thể được thực hiện bằng cách sử dụng thuộc tính CSS hoặc bằng cách sử dụng các tiện ích mặc định của Bootstrap 4. Các cách tiếp cận sau đây sẽ giải thích rõ ràng Cách tiếp cận 1
ví dụ 1. Ví dụ dưới đây minh họa cách tạo danh sách thả xuống có chiều rộng đầy đủ của Bootstrap 4 trong Thanh điều hướng bằng các thuộc tính CSS
đầu ra Cách tiếp cận 2
ví dụ 2. Ví dụ dưới đây minh họa cách tạo danh sách thả xuống có chiều rộng đầy đủ của Bootstrap 4 trong Thanh điều hướng bằng tiện ích Bootstrap 4
Làm cách nào để tạo thanh điều hướng Bootstrap có chiều rộng đầy đủ?Trong Bootstrap 4, có thể thực hiện thả xuống toàn bộ chiều rộng trong Thanh điều hướng bằng cách thêm các thuộc tính CSS bên trong hoặc bên ngoài dựa trên sự tiện lợi. Chỉ tập trung vào danh sách thả xuống lớp và menu thả xuống. Bây giờ, đặt lề trên của menu thả xuống thành 0 pixel và thêm chiều rộng thành 100% . Chúng ta cũng có thể sử dụng các thuộc tính CSS thông qua phương thức nội tuyến.
Làm cách nào để giảm chiều rộng của thanh điều hướng?Chiều cao của thanh điều hướng trong Bootstrap 4 đến từ phần đệm trên các thành phần liên kết của nó và cũng từ phần đệm trên thanh điều hướng chính. Để giảm chiều cao, bạn cần xóa phần đệm trên cả hai . Lớp này đặt padding-top và padding-bottom thành 0. Tiếp theo đặt padding-top và padding-bottom của lớp thanh điều hướng thành 0. |
