LESS kullanmadan bootstrap navbar çöküş kesme noktasını değiştirme

Şu anda tarayıcı genişliği 768 pikselin altına düştüğünde, gezinme çubuğu daraltılmış moda dönüşür. Bu genişliği 1000 piksel olarak değiştirmek istiyorum, böylece tarayıcı 1000 pikselin altında olduğunda navbar daraltılmış moda dönüşür. Bunu LESS kullanmadan yapmak istiyorum, LESS değil stylus kullanıyorum.

Benim sorunum bu sorudakiyle aynı: Bootstrap 3 Navbar Collapse

Ancak bu sorulardaki tüm cevaplar, LESS değişkenini değiştirerek nasıl yapılacağını açıklar. LESS ile uğraşmadım, stylus kullanıyorum, bu yüzden bunun stylus veya başka bir yöntemle nasıl yapılabileceğini bilmek istiyorum.

Teşekkürler!

Bunun için 768 pikselin altında, navbar çökecek özel bir medya sorgusu yazmanız gerekir, bu yüzden 768 pikselin üzerine ve 1000 pikselin altına uygulayın, tıpkı şöyle:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Bu, önyükleme biriminin varsayılan oluşumuna kadar navbar çökmesini gizler. Daraltma sınıfı ters çevrilirken, gezinme çubuğu içindeki iç varlıklar otomatik olarak gizlenecektir, bilge gibi css'nizi istediğiniz gibi ayarlamanız gerekir.

2018 GÜNCELLEME

Bootstrap 4

Navst kesme noktasını değiştirmek Bootstrap 4'te navbar-expand-*sınıfları kullanarak daha kolaydır :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = xs ekranlarında mobil menü <576 piksel
• navbar-expand-md = sm ekranlarında mobil menü <768 piksel
• navbar-expand-lg = md ekranlarda mobil menü <992 piksel
• navbar-expand-xl = lg ekranlarında mobil menü <1200 piksel
• navbar-expand = asla mobil menüyü kullanma
• (no expand class) = her zaman mobil menüyü kullan

Hariç tutursanız navbar-expand-*, mobil menü allgenişliklerinde kullanılacaktır . İşte 6 navbar durumunun bir demosu: Bootstrap 4 Navbar Örneği

Küçük bir CSS ekleyerek özel bir kesme noktası (??? px) da kullanabilirsiniz. Örneğin, işte 1300 piksel ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Özel Navbar Kesme Noktası
Bootstrap 4 Navbar Kesme Noktası Örnekleri

Bootstrap 3.3.x için, navbar kesme noktasını geçersiz kılmak için çalışan CSS. 991pxGezinme çubuğunun daralmasını istediğiniz noktanın piksel boyutuna değiştirin ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

991px için çalışma örneği: http://www.bootply.com/j7XJuaE5v6 1200px için
çalışma örneği: https://www.codeply.com/go/VsYaOLzfb4 (arama formu ile)

Not: Yukarıdakiler 768 pikselden büyük her şey için geçerlidir . 768 pikselden daha azına değiştirmeniz gerekirse 768 pikselden daha az olan örnek buradadır .

içinde bootstrap3 , bu değişkeni değiştirmek @ ızgara-şamandıra-kesme noktası ihtiyacınız birine. Varsayılan değer 768 pikseldir

Son olarak, http://getbootstrap.com/customize/ adresinde '@ grid-float-breakpoint' ile uğraşarak daraltma genişliğinin nasıl değiştirileceği üzerinde çalıştı .

Bootstrap.css hat 2923 (aynı zamanda dk sürüm) ve değişim git @media screen and (min-width: 768px) {için@media screen and (min-width: 1000px) {

Böylece kod şu şekilde sonuçlanacaktır:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Bunu aşağıdaki CSS kodunu kullanarak başarıyla yaptım.

@media(max-width:1000px)  {

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

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Bootstrap 3 .LESS kaynak kodunda , aşağıdaki yararlı açıklamaya sahip variables.lessçağrılan tanımlı bir değişken @grid-float-breakpointvardır:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

Eşleşen @grid-float-breakpoint-maxdeğer, eksi 1 piksele ayarlanır:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Çözüm:

Dolayısıyla, sadece set @grid-float-breakpointyerine 1000px değer ve yeniden bootstrap.lessiçine bootstrap.css:

Örneğin

@grid-float-breakpoint: 1000px;

Bootstrap değişkenlerini değiştirmenin Sass yolu aslında bootstrap-sass github sayfasında belgelenir .

@İmport bootstrap'den önce değişkenleri yeniden tanımlamanız yeterlidir:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

@Skely yanıtına ek olarak , gezinme çubuğu çalışmasında açılır menüler oluşturmak için sınıflarını geçersiz kılmak için de ekleyin. Aşağıdaki son kod:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

demo kodu

Bootstrap v4'te gezinme, er ya da geç farklı css sınıfları kullanılarak daraltılabilir

Örneğin:

• Navbar'ın toggleable-sm
• Navbar'ın toggleable-MD
• Navbar'ın toggleable-lg

Gezinme düğmesi ile:

• gizli-sm-up
• gizli-md-up
• gizli-lg-up

Bootstrap 3.3 için ihtiyacınız olan tek kod budur:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Bu benim için çalıştı Bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

Bu ikisini anlamak için biraz zaman aldı:

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

En iyi seçeneğiniz, kullandığınız CSS işlemcisinin bir portunu kullanmak olacaktır.

SASS'ın büyük bir hayranıyım, bu yüzden şu anda https://github.com/thomas-mcdonald/bootstrap-sass kullanıyorum

Stylus için bir çatal var gibi görünüyor: https://github.com/Acquisio/bootstrap-stylus

Aksi takdirde, Ara ve Değiştir css sürümünde en iyi arkadaşınızdır ...

Merhaba ben böyle kesme noktası bootstrap menüsünü değiştirebilirsiniz böyle CSS kullanarak yapabilirsiniz düşünüyorum

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Gezinme çubukları, içeriği bir düğmenin arkasına daldığında değişmek için .navbar-toggler, .navbar-collapse ve .navbar-expand {-sm | -md | -lg | -xl} sınıflarını kullanabilir. Diğer yardımcı programlarla birlikte, belirli öğelerin ne zaman gösterileceğini veya gizleneceğini kolayca seçebilirsiniz.

Asla daraltılmayan gezinme çubukları için gezinme çubuğundaki .navbar-expand sınıfını ekleyin. Her zaman daraltan gezinme çubukları için .navbar-expand sınıfı eklemeyin.

Örneğin :

<nav class="navbar navbar-expand-lg"></nav>

Mobil menü geniş ekranda görüntüleniyor.

Referans: https://getbootstrap.com/docs/4.0/components/navbar/

Bu benim için hile yaptı:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Bootstrap 4'te, navbar-expand- * olduğunda aşırı sürüş yapmak, hamburgerleri (navbar-toggler) genişletip daraltır ve gösterir ve gizlerseniz, bootstrap.css'de bu stili / tanımı bulmanız ve yeniden tanımlamanız gerekir. kendi customstyle.css (veya eğer çok eğimli iseniz doğrudan bootstrap.css içinde).

Örneğin. Navbar-expand-lg'nin çökmesini ve 950px'te navbar-toggler'ı göstermesini istedim. Bootstrap.css dosyasında şunu bulurum:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Ve bunun altında ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Her iki @ medya sorgusunu da kopyaladım ve bunları style.css dosyamda taktım, sonra boyutumu ihtiyaçlarıma uyacak şekilde değiştirdim. Benim durumum 950 pikselde çökmesini istedim. @Media sorgularının farklı boyutlarda olması gerekir (tahmin ediyorum), bu yüzden kap maksimum genişliğini 949.98px olarak ayarladım ve diğer @ medya sorgusu için 950px kullandım ve böylece aşağıdaki kod benim style.css'e eklendi. Bu, Stackoverflow ve başka yerlerde bulduğum bükülmüş çözümlerden ayrılmak kolay değildi. Bu yardımcı olur umarım.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

İşte Bootstrap ile React kullanarak çalışma kodum

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Şimdi Bootstrap 4.4'te destekleniyor

navbar-expand-sm