Heyecan Bootstrap CSS statik sıvı formu konumlandırma

Question

Böyle bir düzen almaya çalışırken Heyecan Bootstrap çerçevesini kullanıyorum:

Bu şimdi böyle görünüyor:

Current layout http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle fullscreen

jsFiddle

Form kabının genişliği, tarayıcının genişliğine göre değişir (Twitter Bootstrap'in CSS ortam sorguları). İkon kutuları her zaman 14 piksel genişliğe sahiptir.

Metin giriş genişliğini doldurmaya çalışmak için statik genişlikli kenar çubuğu/akışkan içerikli CSS düzenlerine göre farklı şeyler denedim.

Tek seçeneğimin metin girişi için mutlak bir genişlik tanımlayan kendi CSS medya sorgularımı oluşturduğunu düşünüyorum.

Answer 1

Birçok CSS çerçevesinde olduğu gibi, padding ile çok dikkatli olmalısınız. önyükleme ayrıca tüm düzen sıvısını yapmaya gerektiren vermeyerek nesneler için asgari genişlikleri elde etmenizi sağlar

.patch-well { 
    padding: 20px; 
} 

Answer 2

kapalı Bunu al. Durumunuzda, bu nav sıvısı için sargı açıklığını ve satırını yapmayı deneyebilirsiniz.

Answer 3

Tüm formu span3'e koyarsınız, satır genişliğinin yaklaşık% 25'i kadardır. Bu nedenle, eğer çözünürlük büyükse, span3 tüm formu içermesi için yeterli değildir. Daha küçük çözünürlüklerde, span3'ün genişliği% 100, küçük çözünürlüklerde ise iyi görünüyor. Sadece başka bir span sınıfını kullanın ve dikkatlice span sınıflarındaki sayıları hesaplayın. Like here Ayrıca, satır sınıfı yerine satır-sıvı sınıfını kullanmayı tercih ediyorum, genişlikle işlem yapmak daha kolay.

her zaman dalgalı olmayan tasarımında yeni çizgi istediğiniz zaman, bu

<div class="row-fluid"> 
    <div class"span3"> 
    <!-- content1 --> 
    </div> 
    <div class"span9"> 
    <div class="row-fluid"> 
     <div class="span6"> 
      <!-- content2 --> 
     </div 
     <div class="span6"> 
      <!-- content3 --> 
     </div 
    </div> 
    </div> 
</div> 

Not gibi yapıyı kullanmaktadır, ve genişliği od üst elemanın% 100 istiyorum i satır sıvı kullanır. Çünkü çocuk elemanları tekrar 12 elementin toplamı olabilir. Bu örnekte, "content1" büyük çözünürlüklerde% 25 genişlik kullanacaktır, ancak küçük çözünürlüklerde% 100 genişliğe sahip olacaktır. Büyük çözünürlüklerde, "content2" ve "content3", ebeveynlerin genişliğinin% 100'üne sahip olacak, ancak bu, konteyner genişliğinin% 75'idir. Küçük çözünürlüklerde, tüm span sınıfları% 100 genişliğe sahip olacaktır. Bazı durumlarda bunu istemiyorsanız, varsayılan sınıflandırma CD'sini kendi sınıflarınızla geçersiz kılın.

Umarım benim amacım nedir? Benim türküm için üzgünüm :)

Answer 4

http://jsfiddle.net/YxKfc/14/ İstediğiniz budur, Lütfen kontrol edin.