Bootstrap 3 Gezinti Çubuğu Daralt

Bootstrap 3 navbar'ın çöktüğü noktayı arttırmanın herhangi bir yolu var mı (yani, portre tabletlerde bir aşağıya düşmesi için)?

Bu ikisi bootstrap 2 için geçerliydi ama şimdi değil!

Twitter önyükleme duyarlılığı kullanarak navbar çökme eşiğini nasıl değiştirebilirim?

Varsayılan duyarlı gezinme çubuğu kesme noktasını değiştirme

Bugün de aynı sorunu yaşadım.

Bootstrap 4

Bu yerel bir işlevdir: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

.navbar-expand{-sm|-md|-lg|-xl}Sınıfları kullanmalısınız :

<nav class="navbar navbar-expand-md navbar-light bg-light">

Önyükleme 3

@media (max-width: 991px) {
    .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;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Sadece değiştirmek 991pxtarafından 1199pxiçin mdboyutlarda.

gösteri

Bootstrap 2 ve Bootstrap 3 arasındaki en büyük fark Bootstrap 3'ün "önce mobil" olmasıdır.

Bu, varsayılan stillerin mobil cihazlar için tasarlandığı ve Navbars durumunda, varsayılan olarak "daraltıldığı" ve belirli bir minimum boyuta ulaştığında "genişlediği" anlamına gelir.

Bootstrap 3'ün sitesinde aslında ne yapılacağı konusunda bir "ipucu" var: http://getbootstrap.com/components/#navbar

Daralma noktasını özelleştirin

Gezinme çubuğunuzdaki içeriğe bağlı olarak, gezinme çubuğunuzun daraltılmış ve yatay mod arasında geçiş yaptığı noktayı değiştirmeniz gerekebilir. @ Grid-float-breakpoint değişkenini özelleştirin veya kendi medya sorgunuzu ekleyin.

LESS'inizi yeniden derleyecekseniz, variables.lessdosyada belirtilen LESS değişkenini bulacaksınız . Şu anda @media (min-width: 768px)Bootstrap 3 terimleriyle "küçük ekran" (yani bir tablet) olan "genişlet" olarak ayarlanmıştır .

@grid-float-breakpoint: @screen-tablet;

Daraltılmışı biraz daha uzun tutmak istiyorsanız, aşağıdaki gibi ayarlayabilirsiniz:

@grid-float-breakpoint: @screen-desktop; (992 piksel kırılma noktası)

veya daha erken genişle

@grid-float-breakpoint: @screen-phone (480 piksel kırılma noktası)

Daha sonra genişletilmesini ve LESS'in yeniden derlenmesini istemiyorsanız, 768pxmedya sorgusuna uygulanan stillerin üzerine yazmanız ve önceki değere dönmelerini sağlamanız gerekir. Ardından uygun zamanda yeniden ekleyin.

Bunu yapmanın daha iyi bir yolu olup olmadığından emin değilim. Bootstrap LESS'in ihtiyaçlarınıza yeniden derlenmesi en iyi (en kolay) yoldur. Aksi takdirde, Navbar'ınızı etkileyen tüm CSS medya sorgularını bulmanız, bunları 768 piksel genişlikteki varsayılan stiller üzerine yazmanız ve daha sonra daha yüksek bir min genişliğinde geri döndürmeniz gerekir.

LESS'i yeniden derlemek, sadece değişkeni değiştirerek sizin için tüm bu sihri yapacak. Bu hemen hemen LESS / SASS ön derleyicilerinin noktasıdır. =)

(not, hepsini aradım, yaklaşık 100 kod satırı, bu fikri bırakmam ve sadece belirli bir proje için Bootstrap'ı yeniden derlemem ve bir şeyi yanlışlıkla karıştırmamak için yeterince sinir bozucu)

Umarım bu yardımcı olur!

Şerefe!

En kolay yol, bootstrap'i özelleştirmek

değişken bul:

 @grid-float-breakpoint

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

bunlar değişkenler tarafından kontrol edilir, kaynakta dolaşmaya gerek yoktur. bootstrap ile önce değişkenleri deneyin, sonra geçersiz kılın. sonra geri dönüp değişkenleri tekrar deneyin;)

Raylar ile bootstrap-sass kullandım, ancak varsayılan LESS ile aynı.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

bu kadar! bu değişkenler referans sayfası çok kullanışlıdır: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Seb33300 sayesinde bu işi aldım. Ancak, önemli bir kısmı eksik gibi görünüyor. En azından Bootstrap sürüm 3.1.1'de.

Benim sorunum navbar doğru genişlikte buna göre çöktü, ancak menü düğmesi işe yaramadı oldu. Menüyü genişletip daraltamadım.

Bunun nedeni .navbar-collapse.collapse dosyasındaki collapse.in sınıfının! Seb33300 örneği aşağıda tamamlandı:

@media (max-width: 991px) {
    .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;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Jmbertucci'nin cevabını değerlendirmek ve yorum yapmak istedim, ancak kontrollere henüz güvenilmedim. Aynı sorunu yaşadım ve söylediği gibi çözdüm. Bootstrap 3.0 kullanıyorsanız, LESS değişkenlerini değişkenlerde düzenleyin .less Duyarlı kesme noktaları 200 civarında ayarlanır:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Ardından @ grid-float-breakpoint değişkenini yaklaşık 232. satırda navbar için daralma değerini ayarlayın. Varsayılan olarak @ screen-tablet olarak ayarlanmıştır . İsterseniz bir piksel değeri kullanabilirsiniz, ancak LESS değişkenlerini kullanmayı tercih ederim.

Karşılaştığınız sorun menü birden çok satıra bölünüyorsa , aşağıdakilerden birini deneyebilirsiniz:

1) Menü öğelerini kaldırmak veya menü öğelerini kısaltmak gibi menü öğelerinin sayısını veya uzunluklarını azaltmaya çalışın.

2) Aşağıdaki gibi menü öğeleri arasındaki dolguyu azaltmak:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Varsayılan dolgu her iki tarafta 15 pikseldir (sol ve sağ).

Her bir yan kullanımı değiştirmeyi tercih ediyorsanız:

padding-left: 7px; 
padding-right: 8px;

Bu ayar açılır listeyi de etkiler.

Bu soruya cevap vermez, ancak CSS ile uğraşmak veya LESS değişkenlerini kullanmak istemeyenlere yardımcı olabilir. Bu sorunu çözmek için iki yaygın yaklaşım.

Nabvar küçük cihazlarda çökecek. Daralma noktası değişkenlerde @ grid-float-breakpoint ile tanımlanır. Varsayılan olarak bu 768 pikselden önce olur. 768 piksel ekran genişliğinin altındaki ekranlar için gezinme çubuğu şöyle görünür:

Değişkenlerde @ grid-float-breakpoint'i değiştirmek mümkündür. Bootstrap'i yeniden derleyin ve yeniden derleyin. Bunu yaparken navbar.less içindeki @ screen-xs-max öğesini de değiştirmeniz gerekecektir. Bu değeri yeni @ grid-float-breakpoint -1 değerine ayarlamanız gerekir. Ayrıca bkz: https://github.com/twbs/bootstrap/pull/10465 . @ Grid-float-breakpoint noktasındaki gezinme çubuğu formlarını ve açılır menüleri mobil sürümlerine değiştirmek için bu gereklidir.

Bootstrap'i özelleştirmekten yolda bakım ve yükseltme sorunları hakkında endişeliyim. Bugün özelleştirme adımlarını belgeleyebilir ve Bootstrap'i üç yıl sonra yükselten kişinin belgeleri bulacağını ve adımları yeniden uygulayacağını (bu noktada işe yarayıp yaramayacağını) umarım. Bir argüman her iki şekilde de yapılabilir, sanırım, ama kodumda herhangi bir özelleştirmeyi tutmayı tercih ederim.

Yine de Seb33300'ün yaklaşımının nasıl çalışabileceğini tam olarak anlamıyorum. Kesinlikle Bootstrap 4.0.3 ile çalışmadı. Gezinme çubuğunun 768 yerine 1200 olarak genişlemesi için, 768'de genişlemeyi ve 1200'de zorlamayı genişletmeyi önlemek için her iki ortam sorgusu için de kurallar geçersiz kılınmalıdır.

İPad'e Dikey modda sarılabilecek daha uzun bir menüm var. Aşağıdakiler 1200 kesme noktasına kadar menüyü daraltır:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Bootstrap 3.0.0 yüklememle CSS yolunu yaptım, çünkü LESS'e aşina değilim. İşte benim menü her zaman gibi çalışmasını kontrol etmek için izin verdi (hangi bootstrap.css sonra yükler) benim özel css dosyasına eklediğim kod accordion.
Not: Ben bütün sarılı navbariçini sınıf ile bir div sidebarbunu ana menüde gibi sitemde diğer navbars etkilemedi yüzden istediği davranışı ayırmak için. İhtiyaçlarınız doğrultusunda ayarlayın, umarım yardımcı olur.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Ek not: Ayrıca, ana menü geçişine bir değişiklik ekledim navbar(sitemdeki yukarıdaki kod yan tarafta bir "alt menü" için kullanıldığından.

Değiştim:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

içine:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

Ve sonra da ayarlandı:

<div class="navbar-collapse collapse navbar-collapse">

içine:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Sadece bir tane navbarvarsa, sanırım bu konuda endişelenmenize gerek yok, ama benim durumumda bana yardımcı oldu.

Ve standart 768 pikselden daha az bir genişlikte daralmak isteyenler için (768 pikselden daha az bir genişlikte genişletin), bu gerekli css'dir:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Bence sadece css ile çöküş kesme noktasını değiştirmek için basit bir çözüm buldum.

Umarım başkaları bunu tam olarak test etmediğim için onaylayabilir ve bu çözümün yan etkileri olup olmadığından emin değilim.

Aşağıdaki sınıf tanımları için medya sorgu değerlerini değiştirmeniz gerekir:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

Şu anki projemde bu benim için işe yaradı, ancak menüyü tüm ekran boyutları için düzgün bir şekilde düzenlemek için bazı css tanımlarını değiştirmem gerekiyor.

Bu yardımcı olur umarım.