Bootstrap 3 - nonaktifkan runtuhnya navbar

89

Ini adalah bilah navigasi sederhana saya:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

Saya hanya ingin mencegah ini runtuh, karena saya tidak membutuhkannya, gimana caranya?

Saya ingin menghindari menulis 300 ribu baris CSS untuk menimpa gaya default.

Ada saran?

css  twitter-bootstrap-3  navbar  collapse  preventdefault 
— ini aku
sumber

Jawaban:

138

Setelah memeriksa dengan cermat, bukan 300 ribu baris tetapi ada sekitar 3-4 properti CSS yang perlu Anda ganti:

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

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

Dan dengan ini menu Anda tidak akan runtuh.

DEMO ( jsfiddle )

PENJELASAN

Empat properti CSS melakukan masing-masing:

  1. .collapseProperti default dalam bootstrap menyembunyikan sisi kanan menu untuk tablet (lanskap) dan ponsel, dan sebaliknya tombol sakelar ditampilkan untuk menyembunyikan / menampilkannya. Jadi properti ini menimpa default dan terus menampilkan elemen tersebut.

  2. Agar menu sisi kanan muncul pada baris yang sama dengan sisi kiri, kita membutuhkan sisi kiri untuk mengambang ke kiri.

  3. Properti ini hadir secara default di bootstrap tetapi tidak di tablet (potret) untuk resolusi ponsel. Anda dapat melewati yang ini, sepertinya tidak akan memengaruhi bilah navigasi Anda secara keseluruhan.

  4. Ini membuat menu sisi kanan tetap di kanan sedangkan elemen dalam ( li) akan mengikuti properti 2. Jadi kita memiliki float sisi kiri kiri dan kanan float sisi kanan yang membawa mereka menjadi satu baris.

— AyB
sumber
2
@gwho Baru saja menambahkan penjelasan ke jawabannya.
— AyB
1
Jika menjadi cukup kurus, elemen kiri dan kanan yang melayang dapat saling membungkus (saya sedang berbicara tentang uls bukan lis). Apa cara terbaik untuk mencegah hal ini terjadi?
— ahnbizcad
2
Jika satu-satunya persyaratan Anda adalah untuk mencegah daftar UL / LI menjadi vertikal, CSS ke-2 adalah semua yang diperlukan.
— JamesB
1
The !importantpernyataan tidak diperlukan di sini, bagi saya itu bekerja tanpa. Cobalah untuk menghindarinya bila memungkinkan (! Penting).
— Tim-Erwin
2
Dropdown @ICanHasKittenz masih mengubah perilaku saat <768 piksel, mereka ditampilkan di bilah navigasi (beahviour diciutkan) di dalam muncul di kotak putih mengambang (perilaku tidak diciutkan) seperti yang diharapkan. Dan judul dropdown melebar saat diklik, memaksa elemen lain untuk bergeser. Cukup tambahkan dropdown di elemen navbar dan Anda akan melihatnya sendiri.
— Roubi
24

Nabvar akan runtuh pada perangkat kecil. Titik penciutan ditentukan oleh @grid-float-breakpointvariabel. Secara default ini akan dilakukan sebelumnya 768px. Untuk layar di bawah 768lebar layar piksel, bilah navigasi akan terlihat seperti:

masukkan deskripsi gambar di sini

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

Cara termudah adalah dengan menyesuaikan bootstrap

temukan variabel:

 @grid-float-breakpoint

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

Untuk Pengguna SAAS

tambahkan variabel khusus Anda seperti $grid-float-breakpoint: 0px;sebelumnya@import "bootstrap.scss";

— Gagan Gami
sumber
4
ini sangat membantu. Sayangnya saya menggunakan CDN bootstrap jadi saya tidak dapat menyesuaikan file utama bootstrap, ada tip tentang cara melakukan ini dalam file css terpisah?
— itsme
2
1 untuk @ grid-float-breakpoint-variable di halaman kustomisasi bootstrap, itu berhasil bagi saya!
— Wietse
4
Untuk pengguna SASS: cukup tambahkan variabel khusus Anda seperti $grid-float-breakpoint: 0px;sebelum @import "bootstrap.scss";baris
— Duvrai
5

Berikut adalah pendekatan yang membiarkan perilaku penciutan default tidak berubah sementara memungkinkan bagian navigasi baru untuk selalu terlihat. Ini adalah augmentasi dari navbar; navbar-header-menuadalah kelas CSS yang saya buat dan bukan merupakan bagian dari Bootstrap.

Tempatkan ini di navbar-headerelemen setelah navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

Tambahkan CSS ini:

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

Periksa biola: http://jsfiddle.net/L2txunqo/

Peringatan: navbar-rightdapat digunakan untuk mengurutkan elemen secara visual, tetapi tidak dijamin untuk menarik elemen ke bagian paling kanan layar. Biola menunjukkan perilaku itu dengan navbar-form.

— Jeremy Cook
sumber
0

Jika Anda tidak menggunakan versi yang lebih sedikit, berikut adalah baris yang perlu Anda ubah:

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
— Michael Ribbons
sumber
0

Solusi berikut berfungsi untuk saya di Bootstrap 3.3.4:

CSS:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

lalu tambahkan kelas .no-collapse ke setiap daftar dan kelas .off ke penampung utama. Berikut adalah contoh yang ditulis dengan batu giok:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout
— Cristi Draghici
sumber
0

Cara lain adalah dengan hanya menghapus collapse navbar-collapsedari markup. Contoh dengan Bootstrap 3.3.7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>
Luaskan cuplikan

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