Bagaimana cara mengubah ambang runtuhnya navbar menggunakan responsif bootstrap Twitter?

94

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.

css  ruby-on-rails-3  twitter-bootstrap 
— Mark Berry
sumber
Pertanyaan bagus! Dari info yang Anda berikan dalam pertanyaan Anda, saya dapat menerapkan bilah navigasi yang dapat diciutkan mulai dari nol. Terima kasih!
— methodMan

Jawaban:

41

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.

— metode aksi
sumber
12
Terima kasih. bootstrap-responsive.cssdimakamkan di permata bootstrap-sass. Ya, saya bisa mengeditnya tetapi ketika permata diperbarui, saya harus melakukannya lagi. Apakah ada cara untuk mengganti kueri @media, mirip dengan menimpa elemen CSS lainnya?
— Mark Berry
Saya tidak dapat memikirkan cara apa pun untuk mencapai penimpaan tanpa mengulangi semua deklarasi CSS.
— methodofaction
Oke terima kasih. Saya mencoba pendekatan ini, mengesampingkan baris itu dalam kode permata, dan itu agak berfungsi tetapi saya mendapatkan bantalan horizontal ekstra di bilah navigasi di bawah lebar 767px, mungkin karena CSS di @media (max-width: 767px)blok. Sepertinya saya harus melakukan penggantian yang lebih ekstensif seperti yang disarankan dalam jawaban Andres Ilich.
— Mark Berry
2
Seperti disebutkan dalam komentar saya pada jawaban @Andres Ilich, memperbarui kode sumber secara langsung tampaknya lebih rendah dari dua kejahatan dalam hal pemeliharaan, jadi saya akan menerima solusi ini untuk saat ini. Saya dapat hidup dengan 767px sebagai ambang minimum, meskipun saya mungkin dapat menguranginya lebih jauh dengan membuat wadah khusus untuk bilah navigasi yang tidak terpengaruh oleh @media (max-width: 767px). Mudah-mudahan Bootstrap (atau bootstrap-sass) suatu hari nanti akan menyertakan sarana untuk menggunakan variabel untuk mengatur ambang batas, tetapi saya pikir itu akan membutuhkan interpolasi di pemilih media .
— Mark Berry
1
CSS override breakpoint navbar telah berubah untuk Bootstrap 3 - berikut adalah contoh yang berfungsi untuk 3.1: bootply.com/120604
— Zim
73

Bootstrap> 2.1 && <3

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

Pembaruan 2013: Cara mudah

(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);
— Bijan
sumber
6
Anda dapat mengunjungi twitter.github.com/bootstrap/customize.html#variables dan mengubah lebar serta mengunduh. Tidak perlu kompilasi.
— Archonic
Teks tautan dan tombol diperbarui: getbootstrap.com/customize/#less-variables & "Kompilasi dan Unduh"
— digitalextremist
Ini bekerja dengan permata twitter-bootstrap-rails juga jika Anda meletakkan sesuatu seperti @navbarCollapseWidth: 600px;di boostrap_and_overrides.css.less.
— sffc
Ini sepertinya tidak lagi menjadi masalah di Bootstrap 3. :(
— CodingWithSpike
Bagaimana dengan Bootstrap 4?
— Aaron Franke
11

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.

— Andres Ilich
sumber
Terima kasih atas jawaban rinci Anda. Tampaknya berhasil - saya masih mencoba mencari tahu caranya. Jika saya memahami Anda dengan benar, Anda (1) menggandakan @media (max-width: 979px)kueri asli untuk membuat @media (max-width: 550px)kueri baru . Kemudian (2) Anda mengodekan kueri 979px baru untuk menimpa efek dari kueri 979px di utama bootstrap-responsive.css? Urutan tag di CSS Anda tampaknya tidak mengikuti urutan dalam bootstrap-responsive.css, jadi saya mengalami kesulitan membandingkannya untuk melihat apa yang Anda lakukan.
— Mark Berry
@ MarkBerry Anda berada di jalur yang benar. The @media (max-width: 550px)permintaan saya menulis tidak mengikuti awal @media (max-width: 979px)sintaks query karena semua yang saya lakukan adalah contoh cepat utama itu dengan tangan melalui pembakar dan copy / paste, punya malas yang satu itu, tapi cara yang tepat untuk melakukannya adalah seperti yang Anda sebutkan di kedua Anda titik.
— Andres Ilich
1
Ini adalah panggilan yang sulit dalam hal pemeliharaan. Saya khawatir penimpaan ekstensif semacam ini, sambil memberikan kontrol absolut, akan berarti banyak pemeriksaan manual setelah setiap pembaruan Bootstrap vs. langsung memperbarui satu atau dua baris kode sumber sesuai saran oleh @Duopixel. Saya menggunakan Bootstrap sebagian karena saya bukan ahli CSS, jadi saya pikir saya akan menggunakan solusi yang lebih sederhana untuk saat ini.
— Mark Berry
6

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!

— trisweb
sumber
Bisakah Anda menjelaskan di mana Anda meletakkan variabel ini?
— Andy Hayden
Sebelum impor Bootstrap, misalnya@import "bootstrap";
— Ashley
4

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

— Tyler
sumber
3

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";
— mae
sumber
2

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;
}
— bajak laut694
sumber
1

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

— JasonS
sumber
Apakah Anda tahu bagaimana melakukan ini dengan SCSS?
— bcackerman
maaf saya tidak. Saya pikir bootstrap dikembangkan menggunakan LESS, jadi Anda mungkin harus melakukannya dengan cara .css (lihat jawaban bootstrap 2 di atas)
— JasonS
1

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.

— kecanduan coding
sumber
Ini merusak fungsionalitas
— blnc
1

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

— jinhr
sumber
0

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 .

— Jason Capriotti
sumber
Ternyata Bootstrap 2.0.4 telah mengubah struktur file untuk hal-hal yang responsif. Lihat komentar oleh penulis bootstrap-sass @Thomas McDonald. Belum menggali ini, tetapi ini memungkinkan modifikasi ambang yang lebih mudah bahkan dengan versi SASS.
— Mark Berry
Maafkan saya; Saya benar-benar melewatkan komentar Sass dalam pertanyaan ... Saya hanya fokus pada Bootstrap berdasarkan kategorinya. Namun, struktur file terlihat sama dengan apa yang saya lihat di Bootstrap ... bagaimanapun saya akan memperbarui jawaban saya untuk menjawab pertanyaan.
— Jason Capriotti
Jangan khawatir. Dan saya sepenuhnya setuju bahwa solusi terbaik adalah agar bootstrap secara native menawarkan variabel atau serangkaian variabel yang mengontrol ambang runtuhnya navbar. Saya tidak cukup berpengalaman dengan CSS, LESS, atau SASS, atau kueri media untuk menjadi orang yang menulis peningkatan itu;).
— Mark Berry
0

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>
— althras
sumber
0

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;
        }
    }
— Ganpat Kakar
sumber
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.