Dán nhãn ở phía bên trái thay vì phía trên trường nhập liệu

Tôi muốn có các nhãn không ở phía trên trường nhập mà ở phía bên trái.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Mã này cung cấp cho tôi:

Tôi muốn có:

Bạn có thể sử dụng lớp biểu mẫu nội tuyến cho mỗi nhóm biểu mẫu :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Đặt <label>bên ngoài form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

Tài liệu Bootstrap 3 nói về điều này trong tab tài liệu CSS trong phần có nhãn "Yêu cầu chiều rộng tùy chỉnh", trong đó nêu rõ:

Theo mặc định, đầu vào, lựa chọn và văn bản rộng 100% trong Bootstrap. Để sử dụng biểu mẫu nội dòng, bạn sẽ phải đặt chiều rộng trên các điều khiển biểu mẫu được sử dụng bên trong.

Nếu bạn sử dụng trình duyệt và các công cụ Firebug hoặc Chrome để loại bỏ hoặc giảm kiểu "chiều rộng", bạn sẽ thấy mọi thứ sắp xếp theo cách bạn muốn. Rõ ràng sau đó bạn có thể tạo CSS thích hợp để khắc phục sự cố.

Tuy nhiên, tôi thấy thật kỳ lạ khi tôi cần phải làm điều này. Tôi không thể không cảm thấy thao tác này vừa khó chịu và về lâu dài, dễ xảy ra lỗi. Cuối cùng, tôi đã sử dụng một lớp giả và một số JS để cung cấp toàn cầu tất cả các đầu vào nội tuyến của tôi. Đó là một số lượng nhỏ các trường hợp, vì vậy không có nhiều mối quan tâm.

Tuy nhiên, tôi cũng rất muốn nghe ý kiến ​​từ ai đó có giải pháp "đúng" và có thể loại bỏ miếng dán / hack của tôi.

Hy vọng điều này sẽ giúp ích và hỗ trợ bạn vì đã không thổi bay vòng đệm những người đã phớt lờ yêu cầu của bạn như một mối quan tâm của Bootstrap 3.

Bạn có thể tạo biểu mẫu như vậy trong đó kiểm soát nhãn và biểu mẫu nằm cạnh nhau bằng hai phương pháp:

1. Bố cục biểu mẫu nội tuyến

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Bố cục biểu mẫu ngang

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Bạn có thể xem trang này để biết thêm thông tin và bản demo trực tiếp - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Như thế này

BẢN GIỚI THIỆU

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Tôi đã gặp vấn đề tương tự, đây là giải pháp của tôi:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

đây là Demo

Bạn phải thả nổi tất cả các phần tử như sau:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

cung cấp một số lợi nhuận cho các phần tử mong muốn:

 .form-group { margin-right:5px }

và đặt nhãn có cùng chiều cao dòng với chiều cao của các trường:

.form-group label { line-height:--px; }

Bạn có thể thấy từ các câu trả lời hiện có rằng thuật ngữ của Bootstrap là khó hiểu. Nếu bạn nhìn vào tài liệu bootstrap, bạn sẽ thấy rằng biểu mẫu lớp -ngang thực sự dành cho một biểu mẫu có các trường bên dưới nhau, tức là những gì hầu hết mọi người sẽ nghĩ về một biểu mẫu dọc. Lớp chính xác cho một biểu mẫu trên toàn trang là biểu mẫu trong dòng . Có thể họ đã giới thiệu thuật ngữ nội dòng bởi vì họ đã sử dụng sai thuật ngữ ngang .

Bạn thấy từ một số câu trả lời ở đây rằng một số người đang sử dụng cả hai lớp này trong một biểu mẫu! Những người khác nghĩ rằng họ cần form-ngang khi họ thực sự muốn form-inline .

Tôi khuyên bạn nên làm điều đó chính xác như được mô tả trong tài liệu Bootstrap:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Sản xuất:

Bạn có thể sử dụng thẻ span bên trong nhãn

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Tôi đã quản lý để khắc phục sự cố của mình với. Có vẻ như hoạt động tốt và có nghĩa là tôi không phải thêm chiều rộng cho tất cả các đầu vào của mình theo cách thủ công.

.form-inline .form-group input {
 width: auto; 
}

Tôi chắc chắn rằng bạn đã tìm thấy câu trả lời của mình ... đây là giải pháp mà tôi đã tìm ra.

Đó là CSS của tôi.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

Và HTML của tôi ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Bạn có thể xem ví dụ làm việc tại đây ... http://jsfiddle.net/s6Ujm/

Tái bút: Tôi cũng là người mới bắt đầu, các nhà thiết kế chuyên nghiệp ... hãy chia sẻ đánh giá của bạn.

Tôi nghĩ đây là những gì bạn muốn, từ tài liệu bootstrap "Biểu mẫu nằm ngang Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh các nhãn và nhóm điều khiển biểu mẫu trong một bố cục ngang bằng cách thêm .form-vertical vào biểu mẫu. Làm như vậy sẽ thay đổi .form-groups thành hoạt động như các hàng lưới, vì vậy không cần .row ". Vì thế:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Ngoài ra, chúng ta có thể sử dụng nó Đơn giản như

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Có vẻ như việc thêm style="width:inherit;"vào các đầu vào hoạt động tốt. jsfiddle demo

Không cần CSS. Điều này sẽ trông tốt trên trang của bạn. Bạn có thể đặt col-md-*theo nhu cầu của mình

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>