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?
ul
s bukanli
s). Apa cara terbaik untuk mencegah hal ini terjadi?!important
pernyataan tidak diperlukan di sini, bagi saya itu bekerja tanpa. Cobalah untuk menghindarinya bila memungkinkan (! Penting).Nabvar akan runtuh pada perangkat kecil. Titik penciutan ditentukan oleh
@grid-float-breakpoint
variabel. Secara default ini akan dilakukan sebelumnya768px
. Untuk layar di bawah768
lebar layar piksel, bilah navigasi akan terlihat seperti:Anda dapat mengubah
@grid-float-breakpoint
in variable.less dan mengkompilasi ulang Bootstrap. Saat melakukan ini, Anda juga harus mengubah@screen-xs-max
navbar.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";
sumber
$grid-float-breakpoint: 0px;
sebelum@import "bootstrap.scss";
barisBerikut adalah pendekatan yang membiarkan perilaku penciutan default tidak berubah sementara memungkinkan bagian navigasi baru untuk selalu terlihat. Ini adalah augmentasi dari
navbar
;navbar-header-menu
adalah kelas CSS yang saya buat dan bukan merupakan bagian dari Bootstrap.Tempatkan ini di
navbar-header
elemen setelahnavbar-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-right
dapat digunakan untuk mengurutkan elemen secara visual, tetapi tidak dijamin untuk menarik elemen ke bagian paling kanan layar. Biola menunjukkan perilaku itu dengannavbar-form
.sumber
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; } }
sumber
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
sumber
Cara lain adalah dengan hanya menghapus
collapse navbar-collapse
dari 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>
sumber