Bootstrap: sejajarkan input dengan tombol

Mengapa tombol dan input tidak selaras dengan baik di Bootstrap?

Saya mencoba sesuatu yang sederhana seperti:

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

Tombol ini 5pxlebih rendah daripada input di chrome / firefox.

Bootstrap Twitter 4

Di Twitter Bootstrap 4, input dan tombol dapat disejajarkan menggunakan kelas input-group-prependdan input-group-append(lihat https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Tombol grup di sisi kiri (depan)

<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>

Tombol grup di sisi kanan (tambahkan)

<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 Bootstrap 3

Seperti yang ditunjukkan dalam jawaban oleh @abimelex, input dan tombol dapat disejajarkan dengan menggunakan .input-groupkelas (lihat http://getbootstrap.com/components/#input-groups-buttons )

Tombol grup di sisi kiri

<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>

Tombol grup di sisi kanan

<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>

Solusi ini telah ditambahkan untuk menjaga agar jawaban saya tetap mutakhir, tetapi harap berikan jawaban Anda pada jawaban yang diberikan oleh @abimelex .

Twitter Bootstrap 2

Bootstrap menawarkan .input-appendkelas, yang berfungsi sebagai elemen pembungkus dan mengoreksi ini untuk Anda:

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

Seperti yang ditunjukkan oleh @OleksiyKhilkevich dalam jawabannya, ada cara kedua untuk menyelaraskan inputdan buttonmenggunakan .form-horizontalkelas:

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

Perbedaan

Perbedaan antara dua kelas ini adalah yang .input-appendakan menempatkan elemen buttonmelawan input(sehingga mereka terlihat seperti mereka terpasang), di mana .form-horizontalakan menempatkan ruang di antara mereka.

-- Catatan --

Untuk memungkinkan inputdan buttonelemen berdekatan satu sama lain tanpa spasi, font-sizetelah diatur ke 0dalam .input-appendkelas (ini menghilangkan jarak putih antara inline-blockelemen). Ini mungkin memiliki efek buruk pada ukuran font di inputelemen jika Anda ingin mengganti standar menggunakan ematau %pengukuran.

Anda dapat menggunakan properti tombol grup input untuk menerapkan tombol langsung ke kolom input.

Bootstrap 3 & 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 -->

Lihatlah dokumen BS4 Input-Group untuk lebih banyak contoh.

Hanya kepala, tampaknya ada kelas CSS khusus untuk ini form-horizontal

input-append memiliki efek samping lain, yaitu menjatuhkan font-size ke nol

Gunakan .form-inline = Ini akan menyelaraskan label dan kontrol inline-block untuk tata letak yang ringkas

Contoh: http://jsfiddle.net/hSuy4/292/

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

.form-horizontal = Luruskan label kanan dan tempelkan ke kiri untuk membuatnya muncul pada baris yang sama dengan kontrol yang lebih baik untuk tata letak bentuk 2 kolom.

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

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

Saya mencoba di atas semua dan berakhir dengan beberapa perubahan yang ingin saya bagikan. Berikut kode yang berfungsi untuk saya (temukan tangkapan layar terlampir):

<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>

Jika Anda ingin melihatnya berfungsi, cukup gunakan kode di bawah ini di editor Anda:

<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>

Semoga ini membantu.

Saya juga berjuang dengan masalah yang sama. Kelas bootstrap yang saya gunakan tidak berfungsi untuk saya. Saya menemukan solusi, seperti di bawah ini:

<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>

Pada dasarnya, saya mengalahkan properti tampilan kelas "kontrol bentuk", dan menggunakan properti gaya lainnya untuk mengoreksi ukuran dan posisi.

Berikut ini hasilnya:

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>

Saya mencoba semua kode di atas dan tidak ada yang memperbaiki masalah saya. Inilah yang bekerja untuk saya. Saya menggunakan input-grup-addon.

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

Tidak terkait langsung, kecuali jika Anda memiliki kode yang sama tetapi saya hanya melihat perilaku aneh untuk membentuk-inline, bootstrap 3.3.7

Saya tidak menggunakan baris dan sel untuk ini karena ini adalah proyek desktop, jika tag pembuka berada di bawah tabel (dalam kasus ini):

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

Elemen formulir akan menumpuk.

Beralih dan berbaris dengan benar.

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

Safari 10.0.2 dan Chrome terbaru tidak membuat perbedaan. Mungkin tata letak saya salah tetapi tidak terlalu memaafkan.

Ambil float input sebagai kiri. Kemudian ambil tombol dan apungkan dengan benar. Anda dapat menghapus kelas ketika Anda mengambil lebih dari satu jarak.

<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"

Gunakan ini untuk menggeser div Anda ke atas atau ke bawah di baris Anda. Bekerja dengan baik bagi saya.