2015-08-07 16 views
5

Bir önyükleme paneli içinde tanımlanmış bir formum varsa, form grubu düzeni parçalara gider. Nerede olduğunu görebilsin diyeönyükleme formu yanlış görünüyor

enter image description here

Ben formu kırmızı renkli;) burada jsFiddle var: https://jsfiddle.net/DTcHh/

buldum ben css

.panel-body .form-horizontal .form-group { 
    margin-right: 25px; 
    margin-left: 25px; 
} 

eklerseniz Ben daha sonra bu

(Ben nerede olduğunu görebilsin diye formu kırmızı renkli;))

yüzden sorun çözüldü gibi görünüyor, ama

  • bu açılışta bir hata mı bana korkunç kesmek gibi görünüyor
  • Bu css'yi uygulamak zorunda mıyım?
  • Form tanımlarımda yanlış bir şey mi var?

sayesinde önyükleme Docs göre

+1

arrghh! jsFiddle'ı kaybetti. yenisi https://jsfiddle.net/g437m8ve/2/ – jmls

cevap

10

(http://getbootstrap.com/css/#forms-horizontal)

, sınıf form-horizontal bir .row gibi <form> hareket böylece grupları, etiket ve malzeme dan .col-**-* eklemek ve olması gerekmez yapar. Dokümanlar size bir

bir örnek verir. Ancak .row içinde .row ve .col-**-* no. .row, ebeveyni doldurmak için negatif kenar boşluğuna sahiptir ve .col-**-* numaralı telefon numarasıyla, 2 negatif kenar boşluğu vardır.

Bu bir çeşit dağınıklık. İstediğiniz görünümü elde etmek için .row ve .form-horizontal sınıfınızı kaldırmanızı veya yaptığınız gibi kenar boşluğunu eklemenizi öneririm.

Here it's a fiddle.

0

Bana doğru yöne işaret eden diğer cevap sayesinde. Şahsen, diğer form gruplarının etrafına saran 12 genişliğe sahip bir sütun ekleme seçeneğini tercih ediyorum.

<form class="form-horizontal" style="background: red;"> 
    <div class="col col-xs-12"> 
     <div class="form-group"> 
     <label>field 1</label> 
     <input class="form-control" type="text" /> 
     </div> 
     <div class="form-group"> 
     <label>field 2</label> 
     <input class="form-control" type="text" /> 
     </div> 
    </div> 
    </form> 

Here's the fiddle

İlgili konular