Thay đổi điểm dừng thu gọn của thanh điều khiển bootstrap mà không sử dụng LESS

Hiện tại khi chiều rộng trình duyệt giảm xuống dưới 768px, thanh điều hướng sẽ chuyển sang chế độ thu gọn. Tôi muốn thay đổi chiều rộng này thành 1000px để khi trình duyệt dưới 1000px, thanh điều hướng chuyển sang chế độ thu gọn. Tôi muốn làm điều này mà không sử dụng LESS, tôi đang sử dụng bút stylus không LESS.

Vấn đề của tôi cũng giống như trong câu hỏi này: Bootstrap 3 Navbar Sụp đổ

Nhưng tất cả các câu trả lời trong câu hỏi đó giải thích cách thực hiện bằng cách thay đổi biến LESS. Tôi chưa giao dịch với LESS, tôi đang sử dụng bút stylus vì vậy tôi muốn biết làm thế nào điều này có thể được thực hiện bằng bút stylus hoặc phương pháp khác.

Cảm ơn!

Bạn phải viết một truy vấn phương tiện cụ thể cho câu hỏi này, từ câu hỏi của bạn, dưới 768px, thanh điều hướng sẽ thu gọn, vì vậy hãy áp dụng nó trên 768px và dưới 1000px, giống như vậy:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Điều này sẽ ẩn sự sụp đổ thanh điều hướng cho đến khi sự xuất hiện mặc định của đơn vị bootstrap. Khi lớp thu gọn lật các tài sản bên trong thu gọn thanh điều hướng sẽ tự động bị ẩn, giống như khôn ngoan, bạn phải đặt css của mình theo thiết kế mong muốn.

CẬP NHẬT 2018

Bootstrap 4

Thay đổi điểm dừng thanh điều hướng dễ dàng hơn trong Bootstrap 4 bằng cách sử dụng các navbar-expand-*lớp:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = menu di động trên màn hình xs <576px
• navbar-expand-md = menu di động trên màn hình sm <768px
• navbar-expand-lg = menu di động trên màn hình md <992px
• navbar-expand-xl = menu di động trên màn hình lg <1200px
• navbar-expand = không bao giờ sử dụng menu di động
• (no expand class) = luôn sử dụng menu di động

Nếu bạn loại trừ navbar-expand-*menu di động sẽ được sử dụng ở allđộ rộng. Đây là bản demo của tất cả 6 trạng thái thanh điều hướng: Ví dụ về Bootstrap 4 Navbar

Bạn cũng có thể sử dụng điểm dừng tùy chỉnh (??? px) bằng cách thêm một chút CSS. Ví dụ: đây là 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Ví dụ

Đối với Bootstrap 3.3.x, đây là làm việc CSS để ghi đè lên các breakpoint navbar. Thay đổi 991pxkích thước pixel của điểm mà bạn muốn thanh điều hướng sụp đổ ...

@media (max-width: 991px) {
  .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;
  }
}

Ví dụ hoạt động cho 991px: http://www.bootply.com/j7XJuaE5v6
Ví dụ hoạt động cho 1200px: https://www.codeply.com/go/VsYaOLzfb4 (với mẫu tìm kiếm)

Lưu ý: Phần trên hoạt động cho mọi thứ trên 768px . Nếu bạn cần thay đổi nó thành ít hơn 768px , ví dụ dưới 768px là ở đây .

trong bootstrap3 , thay đổi biến này @ lưới-float-breakpoint thành điểm bạn cần. Giá trị mặc định là 768px

Cuối cùng đã tìm ra cách thay đổi độ rộng sập bằng cách thay đổi '@ lưới-float-breakpoint' tại http://getbootstrap.com/customize/ .

Chuyển đến dòng 2923 trong bootstrap.css (phiên bản tối thiểu) và thay đổi @media screen and (min-width: 768px) {thành@media screen and (min-width: 1000px) {

Vì vậy, mã sẽ kết thúc là:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Tôi đã làm điều này thành công bằng cách sử dụng mã CSS sau đây.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Trong mã nguồn Bootstrap 3 .LESS , có một biến được định nghĩa trong lệnh variables.lessgọi @grid-float-breakpointcó nhận xét hữu ích sau:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

@grid-float-breakpoint-maxGiá trị khớp được đặt thành âm 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Giải pháp:

Vì vậy, chỉ cần đặt @grid-float-breakpointgiá trị thành 1000px thay vào đó và xây dựng lại bootstrap.lessthành bootstrap.css:

ví dụ

@grid-float-breakpoint: 1000px;

Cách Sass thay đổi các biến bootstrap thực sự được ghi lại trên trang github bootstrap-sass .

Chỉ cần xác định lại các biến trước khi bạn @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Ngoài câu trả lời @Skely, để làm cho các menu thả xuống bên trong thanh điều hướng hoạt động, cũng thêm các lớp của chúng để được ghi đè. Mã cuối cùng dưới đây:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

mã demo

Trong bootstrap v4, điều hướng có thể được thu gọn sớm hay muộn bằng cách sử dụng các lớp css khác nhau

ví dụ:

• navbar-togglizable-sm
• navbar-togglizable-md
• navbar-togglizable-lg

Với nút điều hướng:

• ẩn-sm-up
• ẩn-md-up
• ẩn-lg-up

Đối với Bootstrap 3.3, đây là mã duy nhất bạn cần:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Điều này làm việc cho tôi Bootstrap3

@media (min-width: 768px) {
    .navbar-header {
          float: none;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-collapse.collapse.in {
          display: block!important;
      }
      .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

Mất một lúc để tìm ra hai điều này:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Đặt cược tốt nhất của bạn sẽ là sử dụng một cổng của bộ xử lý CSS mà bạn sử dụng.

Tôi là một fan hâm mộ lớn của SASS vì vậy tôi hiện đang sử dụng https://github.com/thomas-mcdonald/bootstrap-sass

Có vẻ như có một ngã ba cho bút stylus ở đây: https://github.com/Acquisio/bootstrap-stylus

Mặt khác, Tìm kiếm & Thay thế là người bạn tốt nhất của bạn ngay trong phiên bản css ...

Xin chào, tôi nghĩ rằng bạn có thể làm điều đó bằng CSS như thế này, bạn có thể thay đổi menu bootstrap breakpoint

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Navbars có thể sử dụng các lớp .navbar-toggler, .navbar-sụp đổ và .navbar-bung {-sm | -md | -lg | -xl} để thay đổi khi nội dung của chúng sụp đổ sau một nút. Kết hợp với các tiện ích khác, bạn có thể dễ dàng chọn thời điểm hiển thị hoặc ẩn các yếu tố cụ thể.

Đối với các thanh điều hướng không bao giờ sụp đổ, hãy thêm lớp .navbar-extend trên thanh điều hướng. Đối với các thanh điều hướng luôn bị sập, đừng thêm bất kỳ lớp .navbar-extend nào.

Ví dụ :

<nav class="navbar navbar-expand-lg"></nav>

Menu di động đang hiển thị trên màn hình lớn.

Tham khảo: https://getbootstrap.com/docs/4.0/components/navbar/

Đây là những gì đã lừa tôi:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Trong bootstrap 4, nếu bạn muốn lái xe quá mức khi điều hướng mở rộng- *, mở rộng và thu gọn và hiển thị và ẩn hamburger (navbar-toggler), bạn phải tìm kiểu / định nghĩa đó trong bootstrap.css và xác định lại nó trong riêng customstyle.css (hoặc trực tiếp trong bootstrap.css nếu bạn quá nghiêng).

Ví dụ. Tôi muốn thanh điều hướng-mở rộng-lg sụp đổ và hiển thị nút điều hướng-toggler ở 950px. Trong bootstrap.css tôi tìm thấy:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Và dưới đó ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Tôi đã sao chép cả hai truy vấn @media và dán chúng vào style.css của mình, sau đó sửa đổi kích thước cho phù hợp với nhu cầu của tôi. Tôi trường hợp của tôi, tôi muốn nó sụp đổ ở 950px. Các truy vấn @media phải có kích thước khác nhau (tôi đoán vậy), vì vậy tôi đã đặt độ rộng tối đa của bộ chứa thành 949,98px và sử dụng 950px cho truy vấn @media khác và do đó đoạn mã sau được thêm vào style.css của tôi. Điều này không dễ để tháo gỡ các giải pháp xoắn mà tôi tìm thấy trên Stackoverflow và các nơi khác. Hi vọng điêu nay co ich.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Đây là mã làm việc của tôi sử dụng trong React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Hiện đã được hỗ trợ trên Bootstrap 4.4

navbar-expand-sm