5

Bootstrap 4 kullanıyorum ve sayfamda yatay öğelerle navigasyon yapıyorum. Küçük cihazlarda bu menü daraltılır ve menü öğeleri hala yatay satırdadır. Öğeleri her satır için bir tane olacak şekilde dikey olarak değiştirmek için ne yapmalıyım?Bootstrap 4 duyarlı navbar dikey

+0

Bootstrap 4'ün sta değil olduğunu unutmayın. Beta – Jer

+0

’de olduğu gibi, bunu bana hatırlattığın için teşekkürler. Üretimde kullanmamam gerektiğini anlıyorum ama şimdilik sadece üretimde (en azından başlangıçta) olmayacak bir öğrenci projesinde kullanıyorum ve hala yapılması gereken şeyler var. – Tim

+0

, sizin tarafınızdan denediğiniz ya da hataların kodda nerede olduğunu düşündüğünüz kodları (tüm proje projeniz değil) gönderirseniz başkaları için yararlı olacaktır, bu aynı zamanda cevaplar ve öneriler almanıza yardımcı olacaktır. :) – Jer

cevap

0

Bootstrap 4 için, kesme noktaları değişti. @media sorgu maksimum genişlik navbar-toggleable-* için buna göre ayarlanmalıdır:

@media(max-width: 544px) { 
    .navbar .navbar-nav>.nav-item { 
     float: none; 
     margin-left: .1rem; 
    } 
    .navbar .navbar-nav { 
     float:none !important; 
    } 
    .navbar .collapse.in, .navbar .collapsing { 
     clear:both; 
    } 
} 

Demohttp://codeply.com/go/Ar1H2G4JVH

Not: küçük ekranlarda dikey olmak istiyorsanız Böyle navbar CSS geçersiz kılar navbarda kullanılan sınıf.

  • navbar-toggleable-xs - 544px
  • navbar-toggleable-sm - 767px
  • navbar-toggleable-md - 991px

GÜNCELLEME: ekstra CSS artık olduğunu navbar dikey olarak istifleyeceğinden Bootstrap 4 Alpha 6'ya göre gerekliydu: http://www.codeply.com/go/cCZz5CsMcD

İlgili konular