Soru Bootstrap 3 navbarını 2 satırlık orta boy görünüm boyutunda devre dışı bırak


Bootstrap 3 navbarm büyük bir görünümde 1 satırdır. Daha sonra tarayıcı penceresini küçültmeye başladığımda, 2. satırda, doğru içeriğin ("Merhaba kullanıcı adı", "Oturumu kapat") ikinci sırada yer aldığı görünecektir.

Daha sonra yeniden boyutlandırıldıktan sonra, menü öğeleri kaybolduğunda tekrar 1 satır olur ve menü düğmesi sadece mevcut olur.

2 sıralı aşamayı nasıl geçebilirim?


35
2017-11-15 23:49


Menşei




Cevaplar:


Daraltılmış navbar, sadece menü düğmesi ve yatay 2 veya 1 satır navbar arasındaki nokta (ekran genişliği) ızgara-float-breakpoint ile tanımlanır.

Bu değeri daha yüksek bir değere ayarlayın, varsayılan değer 768px, 2 satır fase atlayacaktır. Orta ızgara sınırını 992px deneyin.

Izgara-float-breakpoint'i değiştirmek için iki seçeneğiniz olacaktır:

  • kaynaktan indirin github, değişiklik @grid-float-breakpoint variable.less ve yeniden bootstrap
  • kullan özelleştirme ve kendi kopyasını indir

Ayrıca bakınız: https://stackoverflow.com/a/18944192/1596547

GÜNCELLEŞTİRME

cvrebert tarafından https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244:

Seçenekleriniz:

  • navbarın, ekranınız büyük navbarınız için yeterince geniş olana kadar daraltılmış halde kalması için ızgara float kesme noktasını değiştirin
  • kullanım duyarlı yardımcı sınıflar daha geniş ekran genişliğinde navbarın bazı bölümlerini gizlemek için bu genişliklere sığacak şekilde
  • navbar öğelerinizi daha kısa / daha az ayrıntılı olacak şekilde yeniden işleme

20
2017-11-16 22:46



Bu cevap benim için aynı sorunu çözdü, kabul edilmeli. - anasaitali
@ Anas10: Bana hatırlattığın için teşekkürler, şimdi kabul ettim. - Adam Szabo


Değeriniz için, burada navbar öğelerini metinden morfolojiyi geçerli yanıt boyutuna göre bir simgeye dönüştüren bir fikir.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

Sonuç, 'İletişim' metninin küçük boyutta bir artı simgesine dönüştürülmesidir. İşte bir bootply örneği


27
2018-01-30 19:35



İyi bir fikir. Daha iyi bir cevap bulamadım. - Hamid FzM
Bunu gerçekten etkili buldum. - Golu
Bu harika bir fikir! Tabii ki, simgeler "açıklayıcı" olduğu sürece - Chris Knight
Zeki. Harika çalışıyor. - Raff


Yeniden derleme önyüklemesini içermeyen alternatif bir çözüm, css'ye aşağıdakileri eklemektir:

@media (max-width: 950px) {
    .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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Bunun nasıl çalıştığını DÜZENLE: Bu, tarayıcı, ortam biraz piksel genişliğinden daha küçükse, navbarın bir navicon'a çökmesini emreder. 2 satırlık bir navbar almaktan kaçınmak için piksel genişliğini uygun şekilde ayarlamanız gerekir. Bunu sadece krom / ipad / iphone / samsung mobile üzerinde çalışmam gereken web sitem navbar için kullanıyorum. Bu tartışmasız bir kesmek ama basit ve test etmek kolaydır.


3
2017-07-22 15:48



Belki de neler yaptığını biraz açıklayabilirsin? Belki bir JSFiddle sağlar? - Luke
Bootstrap ile çalışıyorum 3.3.7. Ancak standart Bootstrap için 991 -> @media (max-width: 991px) kesme noktasına ihtiyacınız var. - stefan
Benim için çalışır, kodla bazı açıklamaları görmek isterim - John Naegle


Beyaz çubuğunu kullanarak başka yerde bulunan başka bir cevaptan ipucu alarak nav çubuğunu azaltmanın daha basit bir yolunu buldum: nowrap. İşte iyi çalıştı:

<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-ex1-collapse" style="width:100%;float:none;position:relative;">
        <ul class="nav navbar-pills nav-justified" role="navigation" style="width:auto;white-space: nowrap;">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li> ...
           </ul>
      </div>
</div>

0
2018-02-17 19:06





_Variables.scss bootstrap dosyalarındaki farklı kurulumların numaralarını kolayca özelleştirebilirsiniz. Bunu nasıl önyükleme kitaplığı aldığınıza bağlı olarak yapabileceğiniz farklı yollar vardır.

  1. Önyükleme URL'sini kullanarak alıyorsanız, dosyayı indirmeniz, düzenlemeniz ve varlığınıza eklemeniz gerekir (çünkü yerel önyüklemeyi bağlamanız gerekiyor).
  2. Görev çalıştırmak için bir çeşit otomasyon kullanıyorsanız (örneğin, grunt, gulp) hepsi, kütüphane dosyalarını bir görevi yürütebilmeniz için dize değiştirme görevine sahiptir.

0
2018-03-06 15:22





En kolay yol. Benim için çalıştı. Sass yolu

.navbar-nav>li float: left .navbar-header float: left .navbar-right float: right!important


0
2018-04-28 11:35