Bootstrap: girişi düğmeyle hizala

Bootstrap'ta düğmeler ve girişler neden iyi hizalanmıyor?

Gibi basit bir şey denedim:

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

Düğme, 5pxchrome / firefox'taki girişten yaklaşık olarak daha düşüktür.

Twitter Önyükleme 4

Twitter Bootstrap 4'te girişler ve düğmeler input-group-prependve input-group-appendsınıfları kullanılarak hizalanabilir (bkz. Https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Sol taraftaki grup düğmesi (başa dön)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Sağ taraftaki grup düğmesi (ekleme)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Twitter Önyükleme 3

@Abimelex, giriş ve düğmeleri ile cevap gösterildiği gibi kullanılarak hizalanabilir .input-groupsınıfları (bkz http://getbootstrap.com/components/#input-groups-buttons )

Sol taraftaki grup 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ğ taraftaki grup düğmesi

<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, cevabımı güncel tutmak için eklendi, ancak lütfen @abimelex tarafından verilen cevap üzerine oyunuzu yapıştırın .

Twitter Önyükleme 2

Bootstrap, bir .input-appendsarmalayıcı öğesi olarak çalışan ve bunu sizin için düzelten bir sınıf sunar :

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

Cevabında @OleksiyKhilkevich'in işaret ettiği gibi, hizalamanın inputve sınıfı buttonkullanarak ikinci bir yol var .form-horizontal:

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

Farklılıklar

Bu iki sınıf arasındaki fark olmasıdır .input-appendyerleştirir buttonkarşı up input(onlar bağlı oldukları gibi bakmak böylece) nerede, eleman .form-horizontalaralarında bir boşluk yerleştirir.

-- Not --

inputVe buttonöğelerinin boşluk bırakmadan yan yana olmasına izin vermek için , sınıfta font-sizeolarak ayarlanmıştır (bu, öğeler arasındaki beyaz boşluğu kaldırır ). Varsayılan değerleri veya ölçümleri geçersiz kılmak istiyorsanız , öğenin yazı tipi boyutları üzerinde olumsuz bir etkisi olabilir .0.input-appendinline-blockinputem%

düğmeyi doğrudan giriş alanına uygulamak için giriş grubu düğmesi özelliğini kullanabilirsiniz.

Önyükleme 3 ve 4

<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><!-- /input-group -->

Daha fazla örnek için BS4 Input-Group belgesine bakınız .

Sadece baş yukarı, bunun için özel bir CSS sınıfı var gibi görünüyor form-horizontal

input-append, yazı tipi boyutunu sıfıra düşüren başka bir yan etkiye sahiptir

Use .form-inline = Bu, kompakt bir düzen için etiketleri ve satır içi blok kontrollerini sola hizalar

Örnek: http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-horizontal = Etiketleri sağa hizalayın ve 2 sütun form düzeni için daha iyi olan kontrollerle aynı satırda görünmelerini sağlamak için sola kaydırın .

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

Örnekler: http://twitter.github.io/bootstrap/base-css.html#forms

Her şeyden önce denedim ve paylaşmak istediğim birkaç değişiklikle bitirdim. İşte benim için çalışan kod (ekli ekran görüntüsünü bulun):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

Eğer çalıştığını görmek istiyorsanız, editörünüzde aşağıdaki kodu kullanın:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

Bu yardımcı olur umarım.

Ben de aynı sorunla mücadele ediyordum. Kullandığım bootstrap sınıfları benim için çalışmıyor. Aşağıdaki gibi bir geçici çözüm buldum:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

Temel olarak, "form-control" sınıfının display özelliğini geçersiz kıldım ve boyutu ve konumu düzeltmek için diğer stil özelliklerini kullandım.

Sonuç şudur:

Bootstrap 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Yukarıdaki tüm kodları denedim ve hiçbiri sorunlarımı düzeltti. İşte benim için işe yarayan. Girdi-grup-addon kullandım.

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

Benzer bir kodunuz yoksa, sadece form-inline, bootstrap için garip bir davranış fark etmediyseniz, doğrudan ilgili değil

Açılış etiketi tablonun altındaysa (bu durumda) bir masaüstü projesi olduğu için bunun için satır ve hücreler kullanmadım:

<table class="form-inline"> 
<form> 
<tr>

Form öğeleri yığınlanır.

Değiştirin ve uygun şekilde hizalayın.

<form>
<table class="form-inline">
<tr>

Safari 10.0.2 ve en son Chrome herhangi bir değişiklik yapmadı. Belki düzenim yanlıştı ama çok affedici değil.

Bir giriş şamandırasını sol olarak alın. Ardından düğmeyi alın ve doğru şekilde yüzün. Birden fazla mesafeye gittiğinizde sınıfı düzeltebilirsiniz.

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

style="padding-top: 8px"

Div'inizi satırınızda yukarı veya aşağı kaydırmak için bunu kullanın. Eserler benim için harikalar yaratıyor.