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
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