hepsini yarın sabah deneyip sonucu dnerim beyler. bootstrap zorunluluğum yok da zurb u ilk defa duydum:) denemekte fayda var tabi Paslanmış bir uygulama geliştirici.. #AnalistŞart

@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.. Paslanmış bir uygulama geliştirici.. #AnalistŞart

http://www.w3schools.com/cssref/css3_pr_mediaquery. asp Media tag' leri responsive' liği sağlamak için kullanılan, farklı çzünürlüklerde dom elementlerinin nasıl grünmesini ayarlayabildiğimiz bir olay. Sizin bozulma tahminen 720px' den itibaren başlıyordur. Bu arada media tag' lerine dilediğiniz değerleri verebilirsiniz ama bunun için belli standartlara bakabilirsiniz : https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Sorunuzun cevabı olarak en basitinden; @media screen and (max-width: 720px) { label } Burada ekran çzünürlüğü maksimum 720px' e kadar olan ekranlara kadar olan label' ların tamamında minimum yüksekliği 50px belirledik. Bu değeri ekranı browser' da küçültüp büyüterek kendiniz ayarlamalısınız. Ayrıca bunun yerine font-size' ı küçültme yoluna da gidilebilir. te yandan sadece max-width değil de belirli aralıklar arasında da media tag' i tanımlayabilirsiniz. Ben genel olarak; 320px, 480px, 720px, 1024px, 1366px ve üst olarak tasarlıyorum. Neden media tag' leri arasına alıyoruz derseniz de, minimum height değerini hepsi için geçerli yaparsak, gereksiz yere 2 satırlık yer açmış olacağız ihtiyacımız yokken. Ya da font boyutu küçük çzünürlükte iyi grünürken büyük çzünürlükte küçük grünecektir gibi gibi. Bir diğer yntem de TS gibi kısaltmalar kullanacaksanız şu şekilde bootstrap ile şyle yapılabilir : Burada xs ve sm telefonlar ve tabletler için md ve lg ise bilgisayarlar ve büyük ekranlar için geçerli oluyor. Burada hidden yaptığınız değerleri o çzünürlüklerde gremezsiniz. 2 tane label koyup birine target service diğerine ts yazıp, ts' de md lg' yi hidden yapabilir diğerinde de xs ve sm' i hidden yaparak gsterebilirsiniz. Boş bir html sayfası yaratıp aşağıdaki kodu kopyalarsanız daha iyi anlarsınız, ekranı büyütüp küçülterek; Using hidden hidden-sm hidden-md hidden-sm hidden-lg hidden-md hidden-lg Theoretical equivalent using visible hidden-sm hidden-md hidden-sm hidden-lg hidden-md hidden-lg Adamsın @ozgunlu hocam. Gayet açıklayıcı ve net olmuş. Emeğine sağlık.. Paslanmış bir uygulama geliştirici.. #AnalistŞart

Çok normal, pencere boyutun daraldıkça text' lerin font-size' ları width' lerine sığmadığı için height' ları uzuyor. Byle 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 grünecek diyorsan. Kısaltabilirsin. Bunun için de şyle birşey yapılabilir, col-md ve col-lg büyük ekranlarda ne grüneceği, col-sm col-xs ise küçük ekranlarda ne grüneceğiyle ilgili olarak bunlar arasına Target Service TS yazılıp altına yine sadece küçükte grünecek Target Service gibi ufak not düşebilirsin. Diğer yntem, 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 grselliği hiç etmemek adına yararlanman için yazdım. ozgunlu tarafından 14/Haz/16 10:14 tarihinde düzenlenmiştir Hello, i am nothing. I come from Neverland.

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. Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

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 Paslanmış bir uygulama geliştirici.. #AnalistŞart

<meta name="viewport" content="width=device-width, initial-scale=1"> bu kodu eklediniz mi?

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. Paslanmış bir uygulama geliştirici.. #AnalistŞart

<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"> Paslanmış bir uygulama geliştirici.. #AnalistŞart

http://www.w3schools.com/cssref/css3_pr_mediaquery. asp Media tag' leri responsive' liği sağlamak için kullanılan, farklı çzünürlüklerde dom elementlerinin nasıl grünmesini ayarlayabildiğimiz bir olay. Sizin bozulma tahminen 720px' den itibaren başlıyordur. Bu arada media tag' lerine dilediğiniz değerleri verebilirsiniz ama bunun için belli standartlara bakabilirsiniz : https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Sorunuzun cevabı olarak en basitinden; @media screen and (max-width: 720px) { label } Burada ekran çzünürlüğü maksimum 720px' e kadar olan ekranlara kadar olan label' ların tamamında minimum yüksekliği 50px belirledik. Bu değeri ekranı browser' da küçültüp büyüterek kendiniz ayarlamalısınız. Ayrıca bunun yerine font-size' ı küçültme yoluna da gidilebilir. te yandan sadece max-width değil de belirli aralıklar arasında da media tag' i tanımlayabilirsiniz. Ben genel olarak; 320px, 480px, 720px, 1024px, 1366px ve üst olarak tasarlıyorum. Neden media tag' leri arasına alıyoruz derseniz de, minimum height değerini hepsi için geçerli yaparsak, gereksiz yere 2 satırlık yer açmış olacağız ihtiyacımız yokken. Ya da font boyutu küçük çzünürlükte iyi grünürken büyük çzünürlükte küçük grünecektir gibi gibi. Bir diğer yntem de TS gibi kısaltmalar kullanacaksanız şu şekilde bootstrap ile şyle yapılabilir : Burada xs ve sm telefonlar ve tabletler için md ve lg ise bilgisayarlar ve büyük ekranlar için geçerli oluyor. Burada hidden yaptığınız değerleri o çzünürlüklerde gremezsiniz. 2 tane label koyup birine target service diğerine ts yazıp, ts' de md lg' yi hidden yapabilir diğerinde de xs ve sm' i hidden yaparak gsterebilirsiniz. Boş bir html sayfası yaratıp aşağıdaki kodu kopyalarsanız daha iyi anlarsınız, ekranı büyütüp küçülterek; <div>Using hidden</div> <div class="hidden-sm hidden-md">hidden-sm hidden-md</div> <div class="hidden-sm hidden-lg">hidden-sm hidden-lg</div> <div class="hidden-md hidden-lg">hidden-md hidden-lg</div> <div>Theoretical equivalent using visible</div> <div class="visible-lg">hidden-sm hidden-md</div> <div class="visible-md">hidden-sm hidden-lg</div> <div class="visible-sm">hidden-md hidden-lg</div> ozgunlu tarafından 14/Haz/16 15:08 tarihinde düzenlenmiştir Hello, i am nothing. I come from Neverland.

bootstrapi kullanmak için zel bi zorunluluğun yoksa zurb foundation u kullan. byle saçmalıkları olmuyor ve şyle bir componenti var http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html black implies white, self implies other, life implies death.

<div class="col-md-1"> li ifadelerini <div class="col-sm-1 col-md-1"> şeklinde düzenler misin? Bazen bununlada ilgisi olabiliyor.

label etiketlerine sabit yükseklik vererek denersen sorunun çzülür bootstrapla alakası yok bunun.