SORU
16 Mayıs 2012, ÇARŞAMBA


bootstrap: düğmesi ile giriş align

Neden düğmeler ve girişler de bootstrap Hizala değil mi? Basit bir şey gibi çalıştım:

<input type="text"/><button class="btn">button</button>

Düğmesi krom/firefox.*giriş 5px hakkında daha düşüktür 30*

CEVAP
16 Mayıs 2012, ÇARŞAMBA


Twitter Bootstrap 3

@Abimelex tarafından cevap gösterildiği gibi, giriş ve düğmeler .input-group sınıfları (http://getbootstrap.com/components/#input-groups-buttons) kullanarak uyumlu olabilir:

Sol tarafta grubu düğmesi

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

Sağ tarafta bir grup düğme

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

Bu çözüm güncel cevabımı tutmak için, ama lütfen-oy sopa the answer provided by @abimelex tarihinde eklendi.

Twitter Bootstrap 2

Bootstrap sarıcı bir unsur olarak çalışır .input-append bir sınıf bulunmaktadır ve bu giderir:

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

@Cevabı içinde OleksiyKhilkevich tarafından belirttiği gibi, .form-horizontal sınıfı kullanarak input button hizalamak için ikinci bir yol vardır:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

Farklar

Arasındaki fark bu iki sınıf olduğunu .input-append kalacak yer button karşı input eleman (çok benziyorlar onlar bağlı) .form-horizontal yer bir uzay aralarında.

-- -- Not

İzin ver input button öğeleri yanında olmak birbirimiz olmadan aralığı, font-size ayarlanmış 0 .input-append sınıf (bu kaldırır beyaz boşluk arasındaki inline-block element). Bu varsayılanları em % kullanarak geçersiz kılmak isterseniz yazı tipi boyutları input element ölçümleri üzerinde olumsuz bir etkisi olabilir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 3DS Max Tutorials

    3DS Max Tuto

    4 AĞUSTOS 2013
  • AlaskanGrizzly

    AlaskanGrizz

    30 EKİM 2009
  • The White House

    The White Ho

    21 Ocak 2006