Forum
Aktif konular
Üyeler
Kurallar
Arama
Bootstrap Textbox Dizilim Sıkıntısı Bootstrap Textbox Dizilim Sıkıntısı
-
Mürdcanlar,
bootstrap ile html tasarımını yapmaya çalışıyorum. Browserı küçülttümde bu şekilde abuk subuk textboxlar kayıyor. Bunu nasıl çözebilirim sizce?
<br> <div class="row"> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> Target Service </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> Origin Country </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs btn-default"> <label for="inputlg"> Dest. Country </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> POL </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> T / S Port </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> POL </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> EQ Type </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> Validity Start </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-1"> <div class="form-group btn-xs"> <label for="inputlg"> Validity End </label> <input class="form-control input-md" id="inputlg" type="text"> </div> </div> <div class="col-md-3"> </div> </div>
rappermcs tarafından 13/Haz/16 17:25 tarihinde düzenlenmiştir -
<meta name="viewport" content="width=device-width, initial-scale=1">
bu kodu eklediniz mi ? -
<div class="col-md-1"> li ifadelerini <div class="col-sm-1 col-md-1"> şeklinde düzenler misin?
Bazen bununlada ilgisi olabiliyor. -
bootstrapi kullanmak için özel bi zorunluluğun yoksa zurb foundation u kullan. böyle saçmalıkları olmuyor ve şöyle bir componenti var
http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
-
hepsini yarın sabah deneyip sonucu dönerim beyler.
bootstrap zorunluluğum yok da zurb u ilk defa duydum:) denemekte fayda var tabi
-
gsspor bunu yazdı
<meta name="viewport" content="width=device-width, initial-scale=1">
bu kodu eklediniz mi ?Mvc project default ta ekliyor hocam bu meta tagı nı
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
Hannibal_King bunu yazdıli ifadelerinişeklinde düzenler misin?
Bazen bununlada ilgisi olabiliyor.Hocam değişen birşey olmadı. Sorun tam sayfa iken olmuyor. Browser penceresini daralttığımda ortaya çıkıyor.
-
label etiketlerine sabit yükseklik vererek denersen sorunun çözülür bootstrapla alakası yok bunun.
-
Çok normal, pencere boyutun daraldıkça text' lerin font-size' ları width' lerine sığmadığı için height' ları uzuyor.
Böyle olunca da input box' lar kayıyor.
Bunun için ya label' larına standart height ver, media tag' leri arasında. Ya da yine media tag' leri arasında font-size' larını küçülterek tek bir line' a sığmasını sağla.
Ek:
Alternatif olarak tek line' da kalsın, height' larıyla uğraşmiyim, font size' ını da küçültünce ufacık görünecek diyorsan. Kısaltabilirsin.
Bunun için de şöyle birşey yapılabilir, col-md ve col-lg büyük ekranlarda ne görüneceği, col-sm col-xs ise küçük ekranlarda ne görüneceğiyle ilgili olarak bunlar arasına Target Service (lg ya da md içinde)
TS* (sm ve xs içinde) yazılıp altına yine sadece küçükte görünecek (xs ve sm' de)
* Target Service gibi ufak not düşebilirsin.
Diğer yöntem, ekran boyutunu js ile alıp jquery ile TS ya da Target Service bastırabilirsin.
Responsive' liği tamamen sağlamak için de https://api.jquery.com/resize/ event' inden faydalanabilirsin.
Bu alternatifler biraz kasıntı ve Target Service TS ile kısaltmak ne derece mantıklı bilemiyorum. Sadece daha uzun başlıklı bir input geldiğinde height' ın boyutuyla görselliği hiç etmemek adına yararlanman için yazdım.
ozgunlu tarafından 14/Haz/16 10:14 tarihinde düzenlenmiştir -
Hocam, normal input kullan o zaman.
CSS kısmına ise
padding:2px;line-height:100%;min-width:10px;width:calc(100% - 4px);
şeklinde yaparsan büyük ihtimal istediğini elde edersin. Denemedim bu arada.
-
@Arlong hoca deneyeceğim sanırım çözer bu dediğin gibi.
@ozgunlu hoca alttaki hale getirebildim lakin "Bunun için ya label' larına standart height ver, media tag' leri arasında. Ya da yine media tag' leri arasında font-size' larını küçülterek tek bir line' a sığmasını sağla" bu gümleni anlamadım açıklarmısın media tag derken inputlardan labellardan mı bahsediyosun?
@ontedi olmadı hoca..
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla