Bootstrap 3 - navbar daraltmayı devre dışı bırakın

89

Bu benim basit gezinti çubuğum:

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

Sadece bunun çökmesini önlemek istiyorum çünkü buna ihtiyacım yok, nasıl yapmalı?

Varsayılan stilleri geçersiz kılmak için 300K CSS satırı yazmaktan kaçınmak istiyorum.

Herhangi bir öneri?

css  twitter-bootstrap-3  navbar  collapse  preventdefault 
— benim
kaynak

Yanıtlar:

138

Yakından inceledikten sonra, 300k satırı değil, ancak geçersiz kılmanız gereken yaklaşık 3-4 CSS özelliği vardır:

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

Ve bununla menünüz çökmeyecek.

DEMO ( jsfiddle )

AÇIKLAMA

Dört CSS özelliği aşağıdakileri yapar:

  1. .collapseBootstrap'teki varsayılan özellik, tabletler (yatay) ve telefonlar için menünün sağ tarafını gizler ve bunun yerine onu gizlemek / göstermek için bir geçiş düğmesi görüntülenir. Bu nedenle, bu özellik varsayılanı geçersiz kılar ve bu öğeleri kalıcı olarak gösterir.

  2. Sağ taraftaki menünün sol tarafla birlikte aynı satırda görünmesi için sol tarafın sola kayması gerekir.

  3. Bu özellik varsayılan olarak önyüklemede mevcuttur ancak tablette (portre) telefon çözünürlüğünde yoktur. Bunu atlayabilirsiniz, muhtemelen genel gezinti çubuğunuzu etkilemeyecektir.

  4. Bu, sağ taraftaki menüyü sağda tutarken, iç öğeler ( li) özelliği 2'yi takip edecektir. Dolayısıyla, sol taraftaki kayan sol ve sağ taraftaki kayan sağa ve bunları tek satıra getiren sağ tarafa kayarız .

— AyB
kaynak
2
@gwho Cevaba bir açıklama ekledi.
— AyB
1
Yeterince sıska hale gelirse, yüzen sol ve yüzen sağ öğeler birbirini sarabilir ( uls'den bahsetmiyorum li). Bunun olmasını engellemenin en iyi yolu nedir?
— ahnbizcad
2
Tek gereksiniminiz UL / LI listesinin dikey hale gelmesini önlemekse, gereken tek şey 2. CSS'dir.
— JamesB
1
!importantO olmadan çalışır benim için ifadeleri, burada gerekli değildir. Mümkün olduğunca onlardan kaçınmaya çalışın (! Önemli).
— Tim-Erwin
2
@ICanHasKittenz Açılır menüler, <768 piksel olduğunda davranışı değiştirmeye devam eder, beklendiği gibi kayan beyaz bir kutu (daraltılmamış davranış) içinde gezinme çubuğunda (daraltılmış beahviour) görüntülenirler. Ve açılır menü başlığı tıklandığında genişler ve diğer öğeleri kaymaya zorlar. Bir gezinti çubuğuna bir açılır menü eklemeniz yeterlidir ve bunu kendiniz göreceksiniz.
— Roubi
24

Nabvar, küçük cihazlarda çökecek. Daraltma noktası @grid-float-breakpointdeğişkenler ile tanımlanır . Varsayılan olarak bu daha önce olacaktır 768px. 768Piksel ekran genişliğinin altındaki ekranlar için gezinme çubuğu şöyle görünecektir:

görüntü açıklamasını buraya girin

@grid-float-breakpointİn değişkenlerini değiştirmek ve Bootstrap'i yeniden derlemek mümkündür . Bunu yaparken @screen-xs-maxnavbar.less'ta da değişiklik yapmanız gerekecek. Bu değeri yeninize ayarlamanız gerekecek @grid-float-breakpoint -1. Ayrıca bkz . : https://github.com/twbs/bootstrap/pull/10465 . Bu, @ grid-float-breakpoint'teki navbar formlarını ve açılır menülerini mobil versiyonlarına değiştirmek için de gereklidir.

En kolay yol, önyüklemeyi özelleştirmektir

değişken bul:

 @grid-float-breakpoint

olarak ayarlanan @screen-sm, ihtiyaçlarınıza göre değiştirebilirsiniz. Umarım yardımcı olur!

SAAS Kullanıcıları için

özel değişkenlerinizi şuradan $grid-float-breakpoint: 0px;önce olduğu gibi ekleyin:@import "bootstrap.scss";

— Gagan Gami
kaynak
4
bu gerçekten yardımcı oldu maalesef bootstrap CDN'yi kullanıyorum, bu yüzden bootstrap ana dosyasını özelleştiremiyorum, bunun ayrı bir css dosyasında nasıl yapılacağına dair herhangi bir ipucu?
— itsme
2
Bootstrap özelleştirme sayfasındaki @ grid-float-breakpoint-değişkeni için +1, bu benim için hile yaptı!
— Wietse
4
SASS kullanıcıları için: özel değişkenlerinizi satırdan $grid-float-breakpoint: 0px;önceki gibi eklemeniz @import "bootstrap.scss";
— yeterlidir
5

Burada, yeni bir gezinme bölümünün her zaman görünür kalmasına izin verirken varsayılan daraltma davranışını değiştirmeden bırakan bir yaklaşım verilmiştir. Bu bir büyütme navbar; navbar-header-menubenim oluşturduğum bir CSS sınıfıdır ve Bootstrap'in bir parçası değildir.

navbar-headerŞunlardan sonra bunu öğeye yerleştirin 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>

Bu CSS'yi ekleyin:

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

Keman kontrol edin: http://jsfiddle.net/L2txunqo/

Uyarı: navbar-rightöğeleri görsel olarak sıralamak için kullanılabilir, ancak öğeyi ekranın en uzak sağ kısmına çekeceği garanti edilmez. Keman, bu davranışı navbar-form.

— Jeremy Cook
kaynak
0

Daha az sürümü kullanmıyorsanız, değiştirmeniz gereken satır şudur:

@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 Şeritler
kaynak
0

Aşağıdaki çözüm Bootstrap 3.3.4'te benim için çalıştı:

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

daha sonra her bir listeye .no-collapse sınıfını ve ana kapsayıcıya .off sınıfını ekleyin . İşte yeşimle yazılmış bir örnek:

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
kaynak
0

Başka bir yol collapse navbar-collapseda işaretlemeden çıkarmaktır . Bootstrap 3.3.7 ile Örnek

<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>
Snippet'i genişlet

— deşmek
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.