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
5
A
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
- 1. navbar sayısında Bootstrap dikey merkezleme
- 2. Bootstrap 4 Navbar sağa hizalanıyor
- 3. Bootstrap duyarlı görüntü sorunu
- 4. Bootstrap Duyarlı Nav Bar
- 5. Bootstrap 4 atlıkarınca değil duyarlı görüntüleri Şuna
- 6. bootstrap navbar birkaç hata
- 7. Bootstrap navbar aralığı sağda
- 8. Bootstrap Duyarlı Yükseklik Sorunu
- 9. Bootstrap 4 kapsayıcıdaki navbar-collapse özelliğini devre dışı bırakın
- 10. Bootstrap 3 Navbar Genişletir ama Başlamaz
- 11. Bootstrap 4, bg-inverse göstermiyor?
- 12. Bootstrap 4 scrollspy, Açısal 4 ile çalışmaz
- 13. Twitter bootstrap navbar gölgesinde kaydırma
- 14. Bootstrap navbar css neden çalışmıyor?
- 15. Bootstrap navbar kaydırma üzerinde sabitlendi
- 16. bootstrap 3 navbar marka rengi
- 17. React-Bootstrap çekme doğru navbar
- 18. Bootstrap navbar genişliğine sığmayan simgeler
- 19. Bootstrap Navbar Dropdown Mobile Issue
- 20. Bootstrap Duyarlı Daraltılmış Alt menü birinci çöküşü
- 21. Heyecan Bootstrap duyarlı görüntüleri unproportionaly
- 22. 10 Bootstrap navbar bölücüleri eşit aralıklarla yerleştirin
- 23. Bootstrap 4 Sekmeden Akordeon'a. Nasıl?
- 24. Bootstrap 4 ile bir karttaki dikey hizalama elemanları
- 25. Bootstrap: Tüm kabı navbar eksi navbar yüksekliğinin altına doldurun
- 26. Masaüstünde Bootstrap navbar-sabit-alt ve mobilde navbar-statik-top?
- 27. Bootstrap 3 - Duyarlı mp4-video
- 28. Bootstrap için Duyarlı Takvim 3
- 29. navbar gösterisini div içinde duyarlı menü içinde oluştur
- 30. Bootstrap 3 navbar iframe içeren sayfalarda
Bootstrap 4'ün sta değil olduğunu unutmayın. Beta – Jer
’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
, 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