Twitter CSS Bootstrap'te bu form öğeleri arasında sağ ve sol kenar boşluklarını CSS ne olarak denetler?

Question

Bu satır içi form öğeleri arasındaki kenar boşluklarını neyin kontrol ettiğini anlayamıyorum. Örneğin, iki metin giriş alanı arasındaki kenar boşluğu.

DÜZENLEME: Bu kenar boşluklarını nasıl değiştireceğimi denetlemeyi biliyorum, ancak neden aralarında bir kenar boşluğu var. Önyükleme sırasında herhangi bir CSS bulamıyorum, bunlar şu anda bu 3 veya 4px kenar boşluklarından sorumludur. İşte

Answer 1

.. ihtiyacınız olacak

Marjı CSS seçiciler giriş/alanlar:

.form-inline .radio, .form-inline .checkbox { 
    margin: 0px 10px; /* Add something like this */ 
} 

: onay kutusu/radyo düğmesi için

.form-inline .form-group { 
    margin: 0px 10px; /* Add something like this */ 
} 

Marjı Gönderme düğmesi kenar boşluğu: varsayılan çünkü tüm satır içi formu

.bs-example { 
    margin: 0px 30px; /* Add something like this */ 
} 

Ve sorunuza cevap için

.bs-example > .btn, .bs-example > .btn-group { 
    margin: 0px 10px; /* Add something like this */ 
} 

Marjı, şu anda elemanları arasında marjları vardır. Bunları kaldırmak isterseniz, yukarıda belirtilen CSS denetimlerine negatif kenar boşlukları ekleyerek bunu manuel olarak yapmanızı öneririz. Eğer girişler arasındaki marjları kaldırmak istediğiniz Örneğin, şöyle yapın:

.form-inline .form-group { 
    margin: 0px -3px; /* Add a negative margin to remove it*/ 
} 

Answer 2

formu girişi sonrasında daha marj koymak örneğin

<form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputEmail2">Email address</label> 
     <input type="email" class="form-control" id="exampleInputEmail2" 
     placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputPassword2">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword2" 
     placeholder="Password"> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox">Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Sign in</button> 
</form> 

için gerekli HTML kodunu izleyerek alanlar şunları yapabilirsiniz: Benzer

form.form-inline div.form-group { 
margin-right: 10px; 
} 

, Onay kutusununiçin aynı diğer elemanlar için hile (örneğin yapabilir 10, gönderme düğmesi için form.form-inline button)

Answer 3

Kafanızın ne olduğunu anlıyorum. İki giriş alanı arasında neden bir boşluk olduğunu bilmek istersiniz. Bunun için cevap, esas olarak bs-example form-inline ana form sınıfında yer almaktadır. Orada firebug veya chromes chromebug kullanarak incelemek varsa, o zaman böyle bir stil göreceksiniz: .bs-example {margin: 0 -15px 15px;}. Şimdi bu iki insansı giriş alanı arasındaki boşluğu kontrol eden kısım. Yangın hatasını veya krom hatasını kullanarak bunu engellerseniz, alanların aslında diğerinin altında olduğunu ve bu kenar boşluğunun her ikisini de yerinde tutan vertical-align konumlandırma ile birlikte göreceğini görürsünüz.

Answer 4

Bootstrap'in belgelerindeki girdiler arasındaki boşluk HTML'deki beyaz alan nedeniyle oluşur. .form-group'un beyaz boşluklara duyarlı satır içi bloğa ayarlandığını unutmayın.

bir gösteri için

, http://jsfiddle.net/kvcrawford/Rs54Q/1/

Sen gibi bazı CSS ile çözebilirsiniz bkz aşağıdadır:

.form-inline-space-fix .form-group { 
    margin-right: 4px; 
} 
.form-inline-space-fix .form-group:last-child { 
    margin-right: 0; 
}