Bootstrap: căn chỉnh đầu vào với nút

Tại sao các nút và đầu vào không khớp tốt trong Bootstrap?

Tôi đã thử một cái gì đó đơn giản như:

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

Nút này 5pxthấp hơn đầu vào trong chrome / firefox.

Twitter Bootstrap 4

Trong Twitter Bootstrap 4, các đầu vào và nút có thể được căn chỉnh bằng cách sử dụng input-group-prependvà input-group-appendcác lớp (xem https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Nút nhóm ở bên trái (trả trước)

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

Nút nhóm ở bên phải (nối thêm)

<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

Như được hiển thị trong câu trả lời của @abimelex, các đầu vào và nút có thể được căn chỉnh bằng cách sử dụng các .input-grouplớp (xem http://getbootstrap.com/components/#input-groups-buttons )

Nút nhóm ở bên trái

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

Nút nhóm ở bên phải

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

Giải pháp này đã được thêm vào để giữ cho câu trả lời của tôi được cập nhật, nhưng vui lòng dán phiếu bầu lên câu trả lời do @abimelex cung cấp .

Twitter Bootstrap 2

Bootstrap cung cấp một .input-appendlớp, hoạt động như một phần tử trình bao bọc và sửa lỗi này cho bạn:

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

Như @OleksiyKhilkevich đã chỉ ra trong câu trả lời của mình, có một cách thứ hai để căn chỉnh inputvà buttonbằng cách sử dụng .form-horizontallớp:

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

Sự khác biệt

Sự khác biệt giữa hai lớp này là .input-appendsẽ đặt phần tử buttonlên trên inputphần tử (để chúng trông giống như chúng được gắn vào), nơi .form-horizontalsẽ đặt một khoảng trắng giữa chúng.

-- Ghi chú --

Để cho phép các phần tử inputvà buttoncác phần tử nằm cạnh nhau mà không có khoảng cách, phần tử font-sizeđã được đặt thành 0trong .input-appendlớp (phần này sẽ loại bỏ khoảng cách màu trắng giữa các inline-blockphần tử). Điều này có thể có ảnh hưởng xấu đến kích thước phông chữ trong thành inputphần nếu bạn muốn ghi đè mặc định bằng cách sử dụng emhoặc %phép đo.

bạn có thể sử dụng thuộc tính nút nhóm đầu vào để áp dụng nút trực tiếp vào trường đầu vào.

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

Hãy xem tài liệu Nhóm đầu vào BS4 để biết thêm nhiều ví dụ.

Chỉ cần ngẩng cao đầu, dường như có lớp CSS đặc biệt cho cái này được gọi là form-horizontal

đầu vào-append có một tác dụng phụ khác, đó là giảm kích thước phông chữ xuống 0

Sử dụng .form-inline = Điều này sẽ căn chỉnh nhãn trái và điều khiển khối nội tuyến cho bố cục nhỏ gọn

Ví dụ: http://jsfiddle.net/hSuy4/292/

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

.form-vertical = Phải căn chỉnh nhãn và thả chúng sang trái để làm cho chúng xuất hiện trên cùng một dòng với các điều khiển tốt hơn cho bố cục biểu mẫu 2 cột.

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

Ví dụ: http://twitter.github.io/bootstrap/base-css.html#forms

Tôi đã thử trên tất cả và kết thúc với một vài thay đổi mà tôi muốn chia sẻ. Đây là mã phù hợp với tôi (tìm ảnh chụp màn hình đính kèm):

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

Nếu bạn muốn thấy nó hoạt động, chỉ cần sử dụng mã dưới đây trong trình chỉnh sửa của bạ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>

Hi vọng điêu nay co ich.

Tôi cũng đang vật lộn với vấn đề tương tự. Các lớp bootstrap tôi sử dụng không hoạt động đối với tôi. Tôi đã đưa ra một cách giải quyết, như sau:

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

Về cơ bản, tôi ghi đè lên thuộc tính hiển thị của lớp "điều khiển biểu mẫu" và sử dụng các thuộc tính kiểu khác để sửa kích thước và vị trí.

Sau đây là kết quả:

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>

Tôi đã thử tất cả các mã trên và không ai trong số chúng sửa được các vấn đề của tôi. Đây là những gì làm việc cho tôi. Tôi đã sử dụng add-group-addon.

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

Không liên quan trực tiếp, trừ khi bạn có mã tương tự nhưng tôi chỉ nhận thấy một hành vi lạ đối với form-inline, bootstrap 3.3.7

Tôi đã không sử dụng hàng và ô cho việc này vì đây là một dự án máy tính để bàn, nếu thẻ mở nằm dưới bảng (trong trường hợp này):

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

Các yếu tố hình thức sẽ xếp chồng lên nhau.

Chuyển đổi và nó xếp hàng đúng cách.

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

Safari 10.0.2 và Chrome mới nhất không có sự khác biệt nào. Có thể bố cục của tôi đã sai nhưng nó không tha thứ lắm.

Lấy một float đầu vào như bên trái. Sau đó lấy nút và thả nó ngay. Bạn có thể xóa lớp tiền tố khi bạn mất nhiều hơn một khoảng cách.

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

Sử dụng điều này để thay đổi div của bạn lên hoặc xuống trong hàng của bạn. Công trình kỳ diệu cho tôi.