Ubah bootstrap navbar collapse breakpoint tanpa menggunakan KURANG

Saat ini ketika lebar browser turun di bawah 768px, navbar berubah menjadi mode diciutkan. Saya ingin mengubah lebar ini menjadi 1000px jadi ketika browser di bawah 1000px navbar berubah menjadi mode diciutkan. Saya ingin melakukan ini tanpa menggunakan KURANG, saya menggunakan stylus bukan KURANG.

Masalah saya sama seperti dalam pertanyaan ini: Bootstrap 3 Navbar Collapse

Tetapi semua jawaban dalam pertanyaan itu menjelaskan bagaimana melakukannya dengan mengubah variabel KURANG. Saya belum pernah berurusan dengan KURANG, saya menggunakan stylus jadi saya ingin tahu bagaimana ini bisa dilakukan dengan menggunakan stylus atau metode lain.

Terima kasih!

Anda harus menulis kueri media khusus untuk ini, dari pertanyaan Anda, di bawah 768px, navbar akan runtuh, jadi terapkan di atas 768px dan di bawah 1000px, seperti itu:

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

Ini akan menyembunyikan runtuhnya navbar sampai unit default bootstrap muncul. Ketika kelas runtuh membalik aset dalam di dalam navbar runtuh akan secara otomatis disembunyikan, seperti bijaksana Anda harus mengatur css Anda seperti yang Anda inginkan desain.

PEMBARUAN 2018

Bootstrap 4

Mengubah breakpoint navbar lebih mudah di Bootstrap 4 menggunakan navbar-expand-*kelas:

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

• navbar-expand-sm = menu seluler pada layar xs <576px
• navbar-expand-md = menu seluler di layar sm <768px
• navbar-expand-lg = menu seluler pada layar md <992px
• navbar-expand-xl = menu seluler pada layar lg <1200px
• navbar-expand = tidak pernah menggunakan menu seluler
• (no expand class) = selalu gunakan menu seluler

Jika Anda mengecualikan navbar-expand-*menu seluler akan digunakan dengan alllebar. Berikut ini demo dari semua 6 status navbar: Contoh Bootstrap 4 Navbar

Anda juga dapat menggunakan breakpoint khusus (??? px) dengan menambahkan sedikit CSS. Sebagai contoh, inilah 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 Kustom Navbar Breakpoint
Contoh bootstrap 4 Navbar Breakpoint

Untuk Bootstrap 3.3.x, di sini adalah CSS yang berfungsi untuk mengganti navbar breakpoint. Ubah 991pxke dimensi piksel dari titik di mana Anda ingin navbar runtuh ...

@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;
  }
}

Contoh kerja untuk 991px: http://www.bootply.com/j7XJuaE5v6
Contoh kerja untuk 1200px: https://www.codeply.com/go/VsYaOLzfb4 (dengan formulir pencarian)

Catatan: Di atas berfungsi untuk apa pun di atas 768px . Jika Anda perlu mengubahnya menjadi kurang dari 768px , contoh kurang dari 768px ada di sini .

di bootstrap3 , ubah variabel @ grid-float-breakpoint ini menjadi yang Anda butuhkan. Nilai standarnya adalah 768px

Akhirnya berhasil mencari cara untuk mengubah lebar keruntuhan dengan mengutak-atik '@ grid-float-breakpoint' di http://getbootstrap.com/customize/ .

Pergi ke baris 2923 di bootstrap.css (juga versi min) dan ubah @media screen and (min-width: 768px) {ke@media screen and (min-width: 1000px) {

Jadi kodenya akan menjadi:

@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;
  }
}

Saya berhasil melakukan ini dengan menggunakan kode CSS berikut.

@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;
    }

}

Dalam Bootstrap 3. KURANG kode sumber , ada variabel yang didefinisikan yang variables.lessdisebut @grid-float-breakpointmemiliki komentar bermanfaat berikut:

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

Nilai yang cocok @grid-float-breakpoint-maxdiatur ke minus 1px itu:

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

Larutan:

Jadi atur saja @grid-float-breakpointnilainya menjadi 1000px dan buat kembali bootstrap.lessmenjadi bootstrap.css:

misalnya

@grid-float-breakpoint: 1000px;

Cara Sass mengubah variabel bootstrap sebenarnya didokumentasikan pada halaman github bootstrap-sass .

Cukup tentukan ulang variabel sebelum Anda @memindahkan bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Selain jawaban @Skely, untuk membuat menu dropdown di dalam navbar berfungsi, juga menambahkan kelas mereka untuk ditimpa. Kode terakhir di bawah:

    @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;
        }
    }

kode demo

Dalam bootstrap v4, navigasi dapat dipercepat cepat atau lambat menggunakan kelas css yang berbeda

misalnya:

• navbar-toggleable-sm
• navbar-toggleable-md
• navbar-toggleable-lg

Dengan tombol untuk navigasi:

• tersembunyi-sm-up
• tersembunyi-md-up
• tersembunyi-lg-up

Untuk Bootstrap 3.3 ini adalah satu-satunya kode yang Anda butuhkan:

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

Ini berfungsi untuk saya 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;
      }
}

Butuh waktu beberapa saat untuk mengetahui keduanya:

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

Taruhan terbaik Anda adalah menggunakan port prosesor CSS yang Anda gunakan.

Saya penggemar SASS jadi saya saat ini menggunakan https://github.com/thomas-mcdonald/bootstrap-sass

Sepertinya ada garpu untuk Stylus di sini: https://github.com/Acquisio/bootstrap-stylus

Jika tidak, Cari & Ganti adalah teman terbaik Anda di versi css ...

Hai saya pikir Anda dapat melakukannya menggunakan CSS seperti ini Anda dapat mengubah 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;
    }
}

Navbar dapat memanfaatkan kelas .navbar-toggler, .navbar-collapse, dan .navbar-rentangkan {-sm | -md | -lg | -xl} untuk mengubah ketika konten mereka runtuh di belakang tombol. Dalam kombinasi dengan utilitas lain, Anda dapat dengan mudah memilih kapan akan menampilkan atau menyembunyikan elemen tertentu.

Untuk navbar yang tidak pernah runtuh, tambahkan kelas .navbar-Expand di navbar. Untuk navbar yang selalu runtuh, jangan tambahkan kelas .navbar-expand.

Sebagai contoh :

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

Menu seluler ditampilkan di layar besar.

Referensi: https://getbootstrap.com/docs/4.0/components/navbar/

Inilah yang menjadi trik saya:

@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;
}

Dalam bootstrap 4, jika Anda ingin menumpang ketika navbar-expand- *, membesar dan runtuh dan menunjukkan dan menyembunyikan hamburger (navbar-toggler), Anda harus menemukan gaya / definisi di bootstrap.css, dan mendefinisikan kembali di Anda miliki customstyle.css (atau langsung di bootstrap.css jika Anda cenderung).

Misalnya. Saya ingin navbar-expand-lg runtuh dan menunjukkan navbar-toggler pada 950px. Di bootstrap.css saya menemukan:

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

Dan di bawah itu ...

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

Saya menyalin kedua @media queries dan memasukkannya ke style.css saya, kemudian memodifikasi ukurannya agar sesuai dengan kebutuhan saya. Saya kasus saya ingin runtuh pada 950px. Kueri @media harus berukuran berbeda (saya tebak), jadi saya mengatur lebar maks penampung menjadi 949,98px dan menggunakan 950px untuk kueri @media lainnya sehingga kode berikut ditambahkan ke style.css saya. Ini tidak mudah untuk terlepas dari solusi bengkok yang saya temukan di Stackoverflow dan di tempat lain. Semoga ini membantu.

@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%;
    }
}

Di sini kode kerja saya menggunakan 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>

Sekarang didukung pada Bootstrap 4.4

navbar-expand-sm