Bootstrap 3 Navbar Collapse

Apakah ada cara untuk meningkatkan titik di mana bootstrap 3 navbar runtuh (yaitu sehingga jatuh ke drop-down pada tablet potret)?

Keduanya berlaku untuk bootstrap 2 tetapi tidak sekarang!

Bagaimana cara mengubah ambang batas navbar menggunakan Twitter bootstrap-responsif?

Ubah breakpoint navbar responsif default

Saya memiliki masalah yang sama hari ini.

Bootstrap 4

Ini adalah fungsi asli: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Anda harus menggunakan .navbar-expand{-sm|-md|-lg|-xl}kelas:

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

Hanya mengubah 991pxoleh 1199pxuntuk mdukuran.

Demo

Perbedaan besar antara Bootstrap 2 dan Bootstrap 3 adalah bahwa Bootstrap 3 adalah "mobile first".

Itu berarti gaya default dirancang untuk perangkat seluler dan dalam kasus Navbar, itu berarti "diciutkan" secara default dan "diperluas" ketika mencapai ukuran minimum tertentu.

Situs Bootstrap 3 sebenarnya memiliki "petunjuk" tentang apa yang harus dilakukan: http://getbootstrap.com/components/#navbar

Kustomisasi titik runtuh

Tergantung pada konten di navbar Anda, Anda mungkin perlu mengubah titik di mana navbar Anda beralih antara mode collapsed dan horizontal. Kustomisasi variabel @ grid-float-breakpoint atau tambahkan kueri media Anda sendiri.

Jika Anda akan mengkompilasi ulang KURANG Anda, Anda akan menemukan variabel KURANG yang tercatat dalam variables.lessfile. Saat ini diatur ke "memperluas" @media (min-width: 768px)yang merupakan "layar kecil" (mis. Tablet) oleh istilah Bootstrap 3.

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

Jika Anda ingin agar collapsed lebih lama, Anda dapat menyesuaikannya seperti:

@grid-float-breakpoint: @screen-desktop; (Break-point 992px)

atau berkembang lebih cepat

@grid-float-breakpoint: @screen-phone (480px break-point)

Jika Anda ingin memperluasnya nanti, dan tidak berurusan dengan kompilasi ulang KURANG, Anda harus menimpa gaya yang diterapkan pada 768pxpermintaan media dan membuatnya kembali ke nilai sebelumnya. Kemudian tambahkan kembali pada waktu yang tepat.

Saya tidak yakin apakah ada cara yang lebih baik untuk melakukannya. Mengkompilasi ulang Bootstrap KURANG untuk kebutuhan Anda adalah cara terbaik (termudah). Jika tidak, Anda harus menemukan semua kueri media CSS yang memengaruhi Navbar Anda, menimpa mereka ke gaya default @ lebar 768px dan kemudian mengembalikannya kembali pada min-width yang lebih tinggi.

Mengkompilasi ulang KURANG akan melakukan semua keajaiban itu untuk Anda hanya dengan mengubah variabel. Yang merupakan inti dari pra-kompiler KURANG / SASS. =)

(catatan, saya memang melihat semuanya, ini sekitar 100 baris kode, yang cukup mengganggu bagi saya untuk membatalkan ide dan hanya mengkompilasi ulang Bootstrap untuk proyek yang diberikan dan menghindari mengacaukan sesuatu secara tidak sengaja)

Saya harap itu membantu!

Bersulang!

Cara termudah adalah menyesuaikan bootstrap

cari variabel:

 @grid-float-breakpoint

yang diatur ke @ screen-sm, Anda dapat mengubahnya sesuai dengan kebutuhan Anda. Semoga ini bisa membantu!

ini dikendalikan dalam variabel, tidak perlu muck sekitar sumber. dengan bootstrap, coba variabel terlebih dahulu, lalu ganti. lalu kembali dan coba variabel lagi;)

saya menggunakan bootstrap-sass dengan rails, tetapi sama dengan KURANG bawaan.

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

itu dia! halaman referensi variabel ini sangat berguna: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Terima kasih kepada Seb33300 saya dapat ini berfungsi. Namun, bagian penting tampaknya hilang. Paling tidak dalam Bootstrap versi 3.1.1.

Masalah saya adalah bahwa navbar runtuh sesuai dengan lebar yang benar, tetapi tombol menu tidak berfungsi. Saya tidak dapat memperluas dan menutup menu.

Ini karena kelas collapse.in ditimpa oleh! Penting di .navbar-collapse.collapse, dan dapat diselesaikan dengan menambahkan "collapse.in". Contoh Seb33300 selesai di bawah ini:

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

Saya ingin mendukung dan mengomentari jawaban jmbertucci, tapi saya belum bisa dipercaya dengan kontrol. Saya memiliki masalah yang sama dan menyelesaikannya seperti yang dia katakan. Jika Anda menggunakan Bootstrap 3.0, edit variabel KURANG dalam variabel.less Titik istirahat responsif diatur di sekitar baris 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);

Kemudian atur nilai runtuh untuk navbar menggunakan variabel @ grid-float-breakpoint di sekitar baris 232. Secara default, ini diatur ke @ screen-tablet . Jika mau, Anda dapat menggunakan nilai piksel, tapi saya lebih suka menggunakan variabel KURANG.

Jika masalah yang Anda hadapi adalah membobol beberapa baris , Anda dapat mencoba salah satu dari yang berikut:

1) Cobalah untuk mengurangi jumlah item menu atau panjangnya, seperti menghapus item menu atau memperpendek kata-kata.

2) Mengurangi bantalan di antara item menu, seperti ini:

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

Padding default adalah 15px kedua sisi (kiri dan kanan).

Jika Anda lebih suka mengubah masing-masing pihak gunakan:

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

Pengaturan ini juga memengaruhi daftar dropdown.

Ini tidak menjawab pertanyaan tetapi bisa membantu orang lain yang tidak ingin mengacaukan dengan CSS atau menggunakan variabel KURANG. Dua pendekatan umum untuk memecahkan masalah ini.

Nagab akan runtuh pada perangkat kecil. Titik runtuh didefinisikan oleh @ grid-float-breakpoint dalam variabel. Secara default, ini akan sebelum 768px. Untuk layar di bawah lebar layar 768 piksel, navbar akan terlihat seperti:

Dimungkinkan untuk mengubah @ grid-float-breakpoint di variable.less dan mengkompilasi ulang Bootstrap. Saat melakukan ini, Anda juga harus mengubah @ screen-xs-max di navbar.less. Anda harus mengatur nilai ini ke @ grid-float-breakpoint -1 baru Anda. Lihat juga: https://github.com/twbs/bootstrap/pull/10465 . Ini diperlukan untuk mengubah formulir dan dropdown navbar di @ grid-float-breakpoint ke versi mobile mereka juga.

Saya prihatin dengan masalah pemeliharaan dan peningkatan di jalan dari menyesuaikan Bootstrap. Saya dapat mendokumentasikan langkah-langkah penyesuaian hari ini dan berharap bahwa orang yang meningkatkan Bootstrap tiga tahun dari sekarang akan menemukan dokumentasi dan menerapkan kembali langkah-langkah tersebut (yang mungkin atau mungkin tidak berfungsi pada saat itu). Argumen bisa dibuat dengan cara baik, saya kira, tapi saya lebih suka menyimpan kustomisasi dalam kode saya.

Saya tidak begitu mengerti bagaimana pendekatan Seb33300 dapat bekerja, meskipun. Ini tentu saja tidak bekerja dengan Bootstrap 4.0.3. Agar bilah nav untuk memperluas di 1200 bukannya 768, aturan untuk kedua kueri media harus diganti untuk mencegah ekspansi di 768 dan memaksakan ekspansi di 1200.

Saya memiliki menu yang lebih panjang yang akan membungkus iPad dalam mode Portrait. Berikut ini membuat menu tetap terkunci hingga 1200 breakpoint:

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

Saya melakukan cara CSS dengan menginstal Bootstrap 3.0.0, karena saya tidak terbiasa dengan KURANG. Berikut adalah kode yang saya tambahkan ke file css khusus saya (yang saya muat setelah bootstrap.css) yang memungkinkan saya untuk mengontrol sehingga menu selalu berfungsi seperti accordion.
Catatan: Saya membungkus seluruh navbarbagian dalam div dengan kelas sidebaruntuk memisahkan perilaku yang saya inginkan sehingga tidak mempengaruhi navbar lain di situs saya, seperti menu utama. Sesuaikan dengan kebutuhan Anda, semoga bisa membantu.

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

Catatan tambahan: Saya juga menambahkan perubahan pada sakelar menu utama navbar(karena kode di atas di situs saya digunakan untuk "submenu" di samping.

Aku berubah:

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

ke:

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

Dan kemudian juga disesuaikan:

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

ke:

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

Jika Anda hanya memiliki satu, navbarsaya kira Anda tidak perlu khawatir tentang ini, tetapi itu membantu saya dalam kasus saya.

Dan bagi mereka yang ingin runtuh pada lebar kurang dari standar 768px (memperluas lebar kurang dari 768px), ini adalah css yang dibutuhkan:

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

Saya pikir saya menemukan solusi sederhana untuk mengubah breakpoint breakpoint, hanya melalui css.

Saya harap orang lain dapat mengkonfirmasinya karena saya tidak mengujinya secara menyeluruh dan saya tidak yakin apakah ada efek samping dari solusi ini.

Anda harus mengubah nilai kueri media untuk definisi kelas berikut:

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

Inilah yang bekerja untuk saya pada proyek saya saat ini, tetapi saya masih perlu mengubah beberapa definisi css untuk mengatur menu dengan benar untuk semua ukuran layar.

Semoga ini membantu.