Bagaimana cara mengubah ambang runtuhnya navbar menggunakan responsif bootstrap Twitter?

Saya menggunakan Twitter Bootstrap 2.0.1 dalam proyek Rails 3.1.2, diimplementasikan dengan bootstrap-sass. Saya memuat file bootstrap.cssdan bootstrap-responsive.cssfile, sertabootstrap-collapse.js Javascript.

Saya memiliki layout fluid dengan navbar yang mirip dengan contoh . Ini mengikuti petunjuk "variasi responsif" navbar di sini . Ini berfungsi dengan baik: jika halaman lebih sempit dari sekitar 940px, bilah navigasi menciut dan menampilkan "tombol" yang dapat saya klik untuk meluaskan.

Namun navbar saya terlihat bagus sampai dengan lebar sekitar 550px, yaitu tidak perlu diciutkan kecuali layarnya sangat sempit.

Bagaimana cara memberi tahu Bootstrap untuk hanya menutup navbar jika lebar layar kurang dari 550px?

Perhatikan bahwa pada titik ini saya tidak ingin mengubah perilaku responsif lainnya, misalnya menumpuk elemen alih-alih menampilkannya secara berdampingan.

Anda mencari baris 239 dari bootstrap-responsive.css

@media (max-width: 979px) {...}

Di mana max-widthnilai tersebut memicu navigasi responsif. Ubah ke 550px atau lebih dan itu akan mengubah ukurannya dengan baik.

Bootstrap> 2.1 && <3

• Gunakan versi bootstrap yang lebih sedikit
• Ubah variabel @navbarCollapseWidth di variable.less
• Kompilasi ulang.

Pembaruan 2013: Cara mudah

• Mengunjungi http://getbootstrap.com/customize/#less-variables
• Ubah @navbarCollapseWidth di bidang formulir
• Klik "Kompilasi dan Unduh".

(THX ke Archonic melalui komentar)

Pembaruan 2014: Bootstrap 3.1.1 dan 3.2 (mereka bahkan menambahkannya ke dokumentasi )

Jika Anda menyesuaikan atau menimpa / mengedit .lessvariabel, Anda mencari:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Anda dapat membuat @mediakueri baru untuk menjatuhkan elemen navbar sesuai keinginan Anda, yang harus Anda lakukan adalah mengatur ulang yang pertama untuk mengakomodasi kueri baru Anda dengan lebar penurunan yang diinginkan. Ambil ini sebagai contoh:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

Dalam kode berikut, Anda dapat melihat bagaimana saya menyertakan @mediakueri asli yang menangani penurunan sebelum 979pxtanda dan kueri baru untuk mendukung titik drop yang Anda inginkan dari550px . Saya memodifikasi kueri asli langsung dari css yang responsif-bootstrap untuk menyetel ulang semua gaya yang diterapkan ke kueri khusus tersebut untuk elemen navbar dan memindahkannya ke kueri baru yang membawa titik drop yang Anda butuhkan. Dengan cara ini kita dapat mengubah semua gaya dari kueri asli ke kueri baru tanpa mengotak-atik stylesheet responsif-bootstrap, dengan cara ini nilai default akan tetap diterapkan ke elemen lain dalam dokumen Anda.

Berikut ini demo singkat dengan kueri media yang disetel 550pxsesuai kebutuhan Anda: http://jsfiddle.net/wU8MW/

Catatan: Saya menempatkan @mediakueri yang dimodifikasi di atas jauh di bawah bingkai css karena css yang baru dimodifikasi seharusnya dimuat terlebih dahulu daripada css responsif.

bootstrap-sass akan mendukung variabel $ navbarCollapseWidth di versi berikutnya (2.2.1.0). Anda akan dapat memperbaruinya untuk melakukan apa yang Anda inginkan setelah versi itu tayang!

Mulai Agustus 2013, halaman "Kustomisasi dan unduh" Bootstrap 3 dapat ditemukan di http://getbootstrap.com/customize/

Dengan Bootstrap 3, variabel yang relevan adalah @ grid-float-breakpoint.

Halaman Stack Overflow berikut memiliki detail tambahan: Bootstrap 3 Navbar collapse

Saya menduga (dan berharap) ini akan segera diimplementasikan secara resmi. Sementara itu, saya hanya melakukan hack css sederhana, menggunakan visible-phone pada tombol dropdown dan visible-tablet pada set kedua tombol yang saya tempatkan di navbar. Jadi sebelumnya terlihat seperti ini:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Dan sekarang terlihat seperti:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Perhatikan bahwa urutan elemen itu penting, jika tidak, Anda mungkin memiliki masalah dengan elemen yang masuk ke baris berikutnya

Saya membuat file SCSS terpisah yang mencantumkan semua parsial yang dibutuhkan bootstrap, dengan cara itu saya dapat mengaktifkan dan menonaktifkan parsial tergantung pada apa yang dibutuhkan situs kami. Dengan cara ini, saya dapat mengganti variabel breakpoint dengan mudah. Inilah yang saya dapatkan:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Ini kode saya (Semua solusi lain menunjukkan scrollbar yang funky saat navbar turun jadi saya mengedit kode jadi tidak). Saya tidak dapat memposting jawaban lain jadi saya akan melakukannya di sini agar orang lain dapat menemukannya. Saya menggunakan rel untuk melakukan ini dengan Bootstrap 3.0.

assets / stylesheets / framework dan timpa tempel ini: (Sesuaikan lebar maks ke nilai apa pun untuk mencapai tujuan Anda.)

@media (max-width: 2500px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootstrap 3.x.

menggunakan LESS , Anda dapat mengubah nilai @screen-smalluntuk menargetkan ukuran min Anda

contoh: @screen-small: 600px;

saya menggunakan ini untuk hanya beralih ke mode "perangkat kecil" setelah lebarnya kurang dari 600px

Bootstrap 3.x.

menggunakan SASS, Anda dapat mengubah nilai $ screen-sm untuk menargetkan ukuran min Anda

contoh: $ screen-sm: 600px;

Anda harus meletakkan nilai ini dalam file application.scss Anda sebelum @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

Lebih sedikit variabel yang dimulai dengan "@" baru saja mengubahnya menjadi "$" untuk menimpanya sebelum diimpor.

Berikut adalah daftar variabel.

Bootstrap 4.x.

Sangat mudah untuk mengubah ambang runtuh di Bootstrap 4.x. Ada 6 kasus:

1. Selalu perluas, jangan pernah menciutkan (yaitu, breakpoint adalah 0px): <nav class="navbar navbar-expand">...</nav>
2. Breakpoint adalah sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
3. Breakpoint adalah md (768px):<nav class="navbar navbar-expand-md">...</nav>
4. Breakpoint adalah lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
5. Breakpoint adalah xl (1200px):<nav class="navbar navbar-expand-xl">.../nav>
6. Selalu ciutkan, jangan pernah memperluas (yaitu, breakpoint adalah ∞px). : <nav class="navbar">...</nav>(Hapus saja navbar-expand-*class. Mobile-first seperti di Bootstrap 4.x)

Kredit untuk artikel ini oleh Carol Skelly saya menemukan https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Ini adalah contoh yang bagus di mana Anda bisa menggunakan versi LESS dari file CSS Bootstrap. Cara melakukannya ada di bawah.

Lebih baik mengirimkan ini sebagai permintaan tarik di Github sehingga semua orang bisa mendapatkan keuntungan dan "kode kustom" Anda mudah-mudahan akan menjadi bagian dari Bootstrap di masa mendatang.

• Tambahkan variabel variables.lessyang menentukan kapan harus menciutkan bilah navigasi. Sesuatu seperti:@navCollapseWidth: 979px
• Kemudian ubah responsive-navbar.less...
  • Perubahan atas @media (max-width: 979px)ke@media (max-width: @navCollapseWidth)
  • Di bagian bawah, ubah @media (min-width: 980px)menjadi@media (max-width: @navCollapseWidth - 1)

Tentu saja ... Anda harus mengkompilasi LESS menggunakan salah satu metode yang disarankan .

Mengambil hack tyler ini lebih jauh dengan menambahkan terlihat-telepon digolongkan blok dan tersembunyi-ponsel kelas untuk item dalam navigasi dilipat utama, Anda dapat 'menarik' satu atau dua item runtuh untuk menampilkan bahkan di navbar telepon.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Cukup tuliskan kode ini di file style.css kustom Anda dan ini akan berfungsi

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }