Bootstrap 3 Navbar sụp đổ

Có cách nào để tăng điểm tại đó thanh điều hướng bootstrap 3 sụp đổ (nghĩa là nó sụp xuống thành một giọt trên máy tính bảng chân dung) không?

Hai cái này được áp dụng cho bootstrap 2 nhưng không phải bây giờ!

Làm cách nào để thay đổi ngưỡng thu gọn thanh điều hướng bằng cách sử dụng Twitter bootstrap-responsive?

Thay đổi điểm dừng thanh điều hướng đáp ứng mặc định

Tôi đã có cùng một vấn đề ngày hôm nay.

Bootstrap 4

Đây là một chức năng gốc: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Bạn phải sử dụng .navbar-expand{-sm|-md|-lg|-xl}các lớp:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

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

Chỉ cần thay đổi 991pxbằng cách 1199pxcho mdkích cỡ.

Bản giới thiệu

Sự khác biệt lớn giữa Bootstrap 2 và Bootstrap 3 là Bootstrap 3 là "di động đầu tiên".

Điều đó có nghĩa là các kiểu mặc định được thiết kế cho các thiết bị di động và trong trường hợp của Navbars, điều đó có nghĩa là nó bị "sụp đổ" theo mặc định và "mở rộng" khi đạt đến kích thước tối thiểu nhất định.

Trang web của Bootstrap 3 thực sự có một "gợi ý" về những việc cần làm: http://getbootstrap.com/components/#navbar

Tùy chỉnh điểm sập

Tùy thuộc vào nội dung trong thanh điều hướng của bạn, bạn có thể cần thay đổi điểm tại đó thanh điều hướng của bạn chuyển giữa chế độ thu gọn và ngang. Tùy chỉnh biến @ lưới-float-breakpoint hoặc thêm truy vấn phương tiện của riêng bạn.

Nếu bạn định biên dịch lại LESS của mình, bạn sẽ tìm thấy biến LESS được ghi chú trong variables.lesstệp. Hiện tại, nó được đặt thành "mở rộng" @media (min-width: 768px)là "màn hình nhỏ" (nghĩa là máy tính bảng) theo 3 thuật ngữ Bootstrap.

@grid-float-breakpoint: @screen-tablet;

Nếu bạn muốn giữ sập lâu hơn một chút, bạn có thể điều chỉnh nó như sau:

@grid-float-breakpoint: @screen-desktop; (Điểm dừng 992px)

hoặc mở rộng sớm hơn

@grid-float-breakpoint: @screen-phone (Điểm dừng 480px)

Nếu bạn muốn mở rộng sau này và không xử lý việc biên dịch lại LESS, bạn sẽ phải ghi đè lên các kiểu được áp dụng tại 768pxtruy vấn phương tiện và đưa chúng trở về giá trị trước đó. Sau đó thêm lại chúng vào thời điểm thích hợp.

Tôi không chắc có cách nào tốt hơn để làm điều đó không. Biên dịch lại Bootstrap LESS theo nhu cầu của bạn là cách tốt nhất (dễ nhất). Mặt khác, bạn sẽ phải tìm tất cả các truy vấn phương tiện CSS ảnh hưởng đến Thanh điều hướng của bạn, ghi đè chúng thành các kiểu mặc định @ chiều rộng 768px và sau đó hoàn nguyên chúng ở độ rộng tối thiểu cao hơn.

Biên dịch lại LESS sẽ làm tất cả điều kỳ diệu đó cho bạn chỉ bằng cách thay đổi biến. Đó là khá nhiều điểm của trình biên dịch trước LESS / SASS. =)

(lưu ý, tôi đã tìm tất cả chúng, khoảng 100 dòng mã, đủ khó chịu để tôi bỏ ý tưởng và chỉ biên dịch lại Bootstrap cho một dự án nhất định và tránh làm hỏng một cái gì đó một cách tình cờ)

Tôi hy vọng điều đó sẽ giúp!

Chúc mừng!

Cách dễ nhất là tùy chỉnh bootstrap

tìm biến:

 @grid-float-breakpoint

được đặt thành @ screen-sm, bạn có thể thay đổi nó theo nhu cầu của mình. Hy vọng nó giúp!

chúng được kiểm soát trong các biến, không cần phải tìm kiếm trong nguồn. với bootstrap, hãy thử biến trước, sau đó ghi đè. sau đó quay lại và thử lại các biến;)

tôi đã sử dụng bootstrap-sass với đường ray, nhưng nó giống với LESS mặc định.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

đó là nó! trang tham chiếu biến này siêu tiện dụng: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Nhờ có Seb33300 tôi đã làm việc này. Tuy nhiên, một phần quan trọng dường như bị thiếu. Ít nhất là trong phiên bản Bootstrap 3.1.1.

Vấn đề của tôi là thanh điều hướng bị sập tương ứng ở độ rộng chính xác, nhưng nút menu không hoạt động. Tôi không thể mở rộng và thu gọn menu.

Điều này là do lớp crash.in bị ghi đè bởi! Quan trọng trong .navbar-sụp đổ.collapse và có thể được giải quyết bằng cách thêm "sụp đổ.in". Ví dụ của Seb33300 hoàn thành dưới đây:

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

Tôi muốn upvote và nhận xét về câu trả lời của jmbertucci, nhưng tôi chưa được tin tưởng với các điều khiển. Tôi đã có cùng một vấn đề và giải quyết nó như ông nói. Nếu bạn đang sử dụng Bootstrap 3.0, hãy chỉnh sửa các biến LESS trong biến.less Các điểm ngắt đáp ứng được đặt xung quanh dòng 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Sau đó, đặt giá trị thu gọn cho thanh điều hướng bằng cách sử dụng biến @ lưới-float-breakpoint ở khoảng dòng 232. Theo mặc định, nó được đặt thành @ screen-tablet . Nếu bạn muốn bạn có thể sử dụng một giá trị pixel, nhưng tôi thích sử dụng các biến LESS.

Nếu vấn đề bạn gặp phải là menu chia thành nhiều dòng , bạn có thể thử một trong các cách sau:

1) Cố gắng giảm số lượng các mục menu hoặc độ dài của chúng, như loại bỏ các mục menu hoặc rút ngắn các từ.

2) Giảm phần đệm giữa các mục menu, như thế này:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Đệm mặc định là 15px cả hai bên (trái và phải).

Nếu bạn muốn thay đổi mỗi bên sử dụng:

padding-left: 7px; 
padding-right: 8px;

Cài đặt này cũng ảnh hưởng đến danh sách thả xuống.

Điều này không trả lời câu hỏi nhưng nó có thể giúp những người khác không muốn gây rối với CSS hoặc sử dụng các biến LESS. Hai cách tiếp cận phổ biến để giải quyết vấn đề này.

Các nabvar sẽ sụp đổ trên các thiết bị nhỏ. Điểm thu gọn được xác định bởi @ lưới-float-breakpoint trong các biến. Theo mặc định, điều này sẽ trước 768px. Đối với màn hình dưới độ rộng màn hình 768 pixel, thanh điều hướng sẽ trông như sau:

Có thể thay đổi @ lưới-float-breakpoint trong biến.less và biên dịch lại Bootstrap. Khi làm điều này, bạn cũng sẽ phải thay đổi @ screen-xs-max trong navbar.less. Bạn sẽ phải đặt giá trị này thành @ lưới-float-breakpoint -1 mới của bạn. Xem thêm: https://github.com/twbs/bootstrap/pull/10465 . Điều này là cần thiết để thay đổi hình thức thanh điều hướng và thả xuống tại điểm dừng @ lưới-float-break thành phiên bản di động của họ.

Tôi lo ngại về vấn đề bảo trì và nâng cấp trong quá trình tùy chỉnh Bootstrap. Tôi có thể ghi lại các bước tùy chỉnh ngày hôm nay và hy vọng rằng người nâng cấp Bootstrap ba năm kể từ bây giờ sẽ tìm thấy tài liệu và áp dụng lại các bước (có thể hoặc không thể hoạt động tại thời điểm đó). Tôi cho rằng một đối số có thể được đưa ra, nhưng tôi thích giữ bất kỳ tùy chỉnh nào trong mã của mình.

Mặc dù vậy, tôi hoàn toàn không hiểu cách tiếp cận của Seb33300 có thể hoạt động. Nó chắc chắn không hoạt động với Bootstrap 4.0.3. Để thanh điều hướng mở rộng ở 1200 thay vì 768, các quy tắc cho cả hai truy vấn phương tiện phải được ghi đè để ngăn mở rộng ở 768 và buộc mở rộng ở 1200.

Tôi có một menu dài hơn sẽ bọc trên iPad ở chế độ Chân dung. Sau đây giữ cho menu bị sụp đổ cho đến khi điểm dừng 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Tôi đã thực hiện theo cách CSS với bản cài đặt Bootstrap 3.0.0, vì tôi không quen với LESS. Đây là mã mà tôi đã thêm vào tệp css tùy chỉnh của mình (mà tôi tải sau bootstrap.css) cho phép tôi kiểm soát để menu luôn hoạt động như một accordion.
Lưu ý: Tôi đã gói toàn bộ navbarbên trong một div với lớp sidebarđể phân tách hành vi tôi muốn để nó không ảnh hưởng đến các điều hướng khác trên trang web của tôi, như menu chính. Điều chỉnh theo nhu cầu của bạn, hy vọng nó là giúp đỡ.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Lưu ý bổ sung: Tôi cũng đã thêm một thay đổi vào chuyển đổi của menu chính navbar(vì mã ở trên trang web của tôi được sử dụng cho "menu con" ở bên cạnh.

Tôi đã thay đổi:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

vào:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

Và sau đó cũng điều chỉnh:

<div class="navbar-collapse collapse navbar-collapse">

vào:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Nếu bạn sẽ chỉ có một navbartôi đoán bạn sẽ không cần phải lo lắng về điều này, nhưng nó đã giúp tôi trong trường hợp của tôi.

Và đối với những người muốn thu gọn ở chiều rộng nhỏ hơn 768px tiêu chuẩn (mở rộng ở chiều rộng nhỏ hơn 768px), đây là css cần thiết:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Tôi nghĩ rằng tôi đã tìm thấy một giải pháp đơn giản để thay đổi điểm dừng sụp đổ, chỉ thông qua css.

Tôi hy vọng những người khác có thể xác nhận nó vì tôi đã không kiểm tra kỹ lưỡng và tôi không chắc liệu có tác dụng phụ cho giải pháp này hay không.

Bạn phải thay đổi các giá trị truy vấn phương tiện cho các định nghĩa lớp sau:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

Đây là những gì làm việc cho tôi trong dự án hiện tại của tôi, nhưng tôi vẫn cần thay đổi một số định nghĩa css để sắp xếp menu đúng cho tất cả các kích thước màn hình.

Hi vọng điêu nay co ich.