Ubah bootstrap navbar collapse breakpoint tanpa menggunakan KURANG


205

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!

Jawaban:


50

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.


Saat ini navbar runtuh ketika lebarnya di bawah 768px. Tapi saya ingin navbar runtuh ketika lebarnya di bawah 1000px. Untuk ini, tidakkah Anda perlu menunjukkan .collapse antara 768 dan 1000?
Nearpoint

ya, collapsekelas penting untuk layar ponsel sehingga jika lebarnya di bawah 768px navbar akan menjadi display:none, sehingga tindakan yang diperlukan akan diterapkan di dalam tanda 768 dan 1000 ...
SaurabhLP

64
ini tidak bekerja pada Bootstrap 3 karena ada aturan lain navbar-collapse.collapseyang memiliki display: block !important. Menonaktifkan yang akan mengakibatkan tombol runtuh tidak muncul ... jadi saya rasa itu banyak kelas yang perlu didefinisikan ulang, bukan hanyacollapse
Daniele Ricci

42
Ya, sekelompok kelas Bootstrap harus diganti dalam kueri media khusus: bootply.com/120604
Zim

1
Haha siapa sih yang membangun bootstrap? Tidakkah kita perlu mengubah detail kecil itu?
MH

400

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


Bootstrap 3

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 .



Coba Kunjungan Pertama ini: [tautan] ( getbootstrap.com/customize Locate: 'Less variable' -> 'Breakpoints kueri media' Ubah: Nilai @ layar-lg dari 1200px ke 1920px Temukan: “Sistem grid” -> @ grid-float -breakpoint Change: @ screen-sm-min ke @ screen-lg Gulir ke akhir
halaman.Klik

6
Kode di atas ini berfungsi ketika saya menetapkan nilai lebih tinggi dari 768px, namun saya harus mencapai kebalikannya ... Saya hanya ingin itu runtuh, misalnya pada 400px, tetapi ketika saya menetapkan nilai ini, bootstrap tampaknya mengambil yang asli 768 - Ada ide? Terima kasih
Chris Richards

6
Meskipun jawaban ini bekerja seperti pesona, tetapi mengacaukan menu dropdown , mungkin Anda perlu meningkatkan jawaban.
Abhishek Pandey

2
@AbhishekPandey Saya menemukan jawaban ini berguna (bagian mengenai dropdown)
cbuchart

1
Terima kasih. Berbeda dengan "solusi" dengan tanda centang di sebelahnya, kode Anda benar-benar berfungsi.
Michael S. Miller

46

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


17
Bisakah Anda memposting contoh?
e.ompsy

2
Perlu diingat bahwa jika Anda menggunakan sass dan Anda tidak ingin mengganti kode vendor (Anda tidak harus), Anda harus memasukkan file yang berisi variabel dengan nilai kustom Anda sebelum file bootstrap sass. Alasannya adalah semua variabel Bootstrap diatur ke default! nilai, jadi kami perlu mengganti nilai-nilai ini dengan mengimpor variabel kami terlebih dahulu.
Makis K.

Tolong tambahkan contoh bagaimana melakukan ini ... Saya baru bootstrap, dan grep mengungkapkan 0 contoh variabel ini dalam proyek saya.
Matt Clark

1
@MattClark @grid-float-breakpointdidefinisikan pada kompiler: getbootstrap.com/customize - nilai defaultnya adalah @screen-sm-minAnda dapat mengubahnya 1234px.
rybo111

24

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

Perhatikan nomor baris yang Anda kutip akan berbeda jika Anda telah menggunakan Customizer: getbootstrap.com/customize
henrywright

1
Baru saja mengubah karya @grid-float-breakpointsaya responsive.lessuntuk saya!
cvng

6
Anda harus menimpanya di file CSS lain alih-alih mengubah file cstr bootstrap secara langsung.
Ivanka Todorova

1
Kunjungan Pertama: [tautan] ( getbootstrap.com/customize Locate: 'Less variable' -> 'Breakpoints kueri media' Ubah: Nilai @ layar-lg dari 1200px ke 1920px Temukan: “Sistem grid” -> @ grid-float-breakpoint Ubah: @ screen-sm-min ke @ screen-lg Gulir ke akhir
halaman.Klik

13

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

}

2
Itu tidak menunjukkan tombol menu diciutkan ketika lebar di mana saja antara 768px hingga 1000px.
pengrajin

4
@craftsman: Untuk tombol, gunakan ini: .navbar-toggle {display: block! important; } .navbar-header {width: 100%; tinggi: 60px; }
Aniket Suryavanshi

3
masih tidak menampilkan konten di dalam menu hamburger
behzad

13

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;

Bagaimana cara membangun kembali? Saya mencoba baris perintah ini:$ lessc bootstrap.less bootstrap.css tetapi tidak ada yang terjadi
AnthonyR

@AnthonyRn: Saya tidak tahu apa pengaturan proyek Anda. Saya cukup memperbarui sumber KURANG Bootstrap di proyek VS 2013 saya dan itu dibangun kembali pada save. mungkin Anda harus mengajukan pertanyaan baru?
Hilang Coding

Masalah saya terpecahkan dengan menggunakan alat penyesuai online Bootstrap di sini getbootstrap.com/customize Terima kasih atas solusinya!
AnthonyR

1
Saya pikir ini harus menjadi jawaban yang diterima, karena menggunakan metode Bootstraps sendiri untuk mendefinisikan breakpoint. Sebagai contoh, saya dapat melakukan bootstrap 'rebuild' yang sederhana, dan mendapatkan hasil yang diinginkan dengan mengatur variabel ini ke apa yang saya butuhkan sebagai breakpoint.
Serge Melis

@AnthonyR Untuk Membangun Kembali Anda menggunakan perintah grunt grunt distyang akan membuat ulang direktori dist. Anda akan menjalankan perintah itu dari direktori di mana Anda memiliki gruntfile.js Anda. Referensi: getbootstrap.com/getting-started/#grunt
Radmation

11

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';

7

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


4

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

Di alpha saat ini, sepertinya hanya pergi navbar-toggleable-smuntuk saya, xsmembuatnya tidak pernah beralih. Bisa jadi saya melakukan sesuatu yang salah. Terima kasih!
nerdwaller

@nerdwaller sepertinya Anda benar, melakukan pengeditan dari xs ke sm.
whitneyland

3

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

Tidak berfungsi sepenuhnya. Item menu yang ditampilkan bukan vertikal, melainkan horizontal.
Volomike

3

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

Ini berhasil untuk saya. Satu-satunya pengecualian adalah lebar piksel minimum harus 1000px dalam sampel Anda di atas.
Sascha

2

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 ...


Jadi untuk opsi cari & ganti, apakah itu berarti mengedit permintaan media bootstrap.css secara langsung? Bisakah saya mengubah kueri media yang hanya berlaku untuk navbar? Saya diberitahu itu bukan ide yang baik untuk mengedit file sumber bootstrap, tapi saya tidak tahu mengapa, bagaimana menurut Anda?
Nearpoint

1

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

1

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/


Ya, ini bekerja untuk saya persis seperti yang saya butuhkan. Tentu saja, jika Anda memerlukan breakpoint yang lebih spesifik, maka mengonfigurasi kueri media Anda sendiri akan diperlukan (maka jawaban yang menguntungkan untuk pertanyaan ini)
Coderhi

0

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

Dengan solusi Anda dan yang oleh Veek saya menemukan bahwa antara 768 dan 1000 margin berkembang, tidak tepat. Mereka baik-baik saja di luar batas itu. Dengan solusi Anda, ikon untuk menu yang diciutkan juga tidak tetap di sebelah kanan setelah diciutkan tetapi menekan terhadap "merek".
Mike O'Connor

Maaf, sepertinya saya melakukan kesalahan. Saya masih memiliki masalah margin yang tidak sesuai lebar muncul di dalam batas-batas itu. Namun saya melihat sekarang bahwa contoh bootstrap online resmi menunjukkan masalah margin yang sama.
Mike O'Connor

0

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

0

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>

0

Sekarang didukung pada Bootstrap 4.4

navbar-expand-sm 

Ya benar, tetapi Anda perlu navbar-expand-lg untuk menutup nav di layar besar
Coderhi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.