Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML' bắt đầu bởi admin, 5/5/17.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,021
    Đã được thích:
    847
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Thay đổi kích thước co lại responsive trên mobi của menu bootstrap.

    Mặc định menu của bootstrap chiều rộng trình duyệt giảm xuống dưới 768px, thanh điều hướng sẽ thay đổi thành chế độ thu gọn. Để thay đổi kích thước co lại của thanh menu lớn nhỏ theo ý thì các bạn làm như dưới tùy theo phiên bản bootstrap bạn đang sử dụng.

    menu-bootstrap-thu-gon.png

    1. Với phiên bản Bootstrap 3.3.x ... ta copy đoạn code dán vào header hoặc tìm tới bootstrap để thay thế thuộc tính 1000px thành chiều rộng muốn co lại trên mobi.

    Mã:
    @media (max-width: 1000px) {
      .navbar-header {
          float: none;
      }
      .navbar-left,.navbar-right {
          float: none !important;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-nav {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .collapse.in{
          display:block !important;
      }
    }
    
    2. Với phiên bản Bootstrap 4 cập nhật năm 2017 thì không cần thêm code vào mà chỉ cần chỉnh lại ở thẻ nav như sau:
    Mã:
    <nav class="navbar navbar-toggleable-sm">..</nav>
    
    Tương ứng với:
    • navbar-toggleable = Menu trên mobi xs màn hình có kích thước<576px
    • navbar-toggleable-sm = Menu trên mobi sm màn hình có kích thước <768px
    • navbar-toggleable-md = Menu trên mobi md màn hình có kích thước <992px
    • navbar-toggleable-lg = Menu trên mobi lg màn hình có kích thước <1200px
    • navbar-toggleable-xl = Không sử dụng menu trên mobi
     
    Cảm ơn đã xem bài:

    Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 5/5/17
  2. dinhngoclam113

    dinhngoclam113 Thành Viên Mới

    Tham gia ngày:
    27/12/16
    Bài viết:
    13
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Em có một lỗi nhỏ là hái menu giật 3 cấp của em thế quái nào cấp thứ 3 nó lại ăn vào cỡ chứ của nội dung, khi chỉnh font chữ của nó là nó chỉnh luôn menu cấp 3 của mình làm vỡ tùm lum. file CSS thì khó chỉnh quá.
     
  3. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,021
    Đã được thích:
    847
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn chụp hình và đưa link web mình xem cho bạn nhé.
     


Like và Share ủng hộ ITSEOVN