Bootstrap 3.0: Làm thế nào để có văn bản và đầu vào trên cùng một dòng?

Question

Tôi hiện đang chuyển trang web của mình sang Bootstrap 3.0. Tôi đang gặp sự cố với định dạng biểu mẫu và nhập liệu. Những gì đã làm việc trong Bootstrap 2 không hoạt động trong Bootstrap 3.

Làm thế nào tôi có thể nhận được văn bản trên cùng một dòng trước và sau khi nhập biểu mẫu? Tôi đã thu hẹp nó xuống thành vấn đề với lớp 'kiểm soát biểu mẫu' trong phiên bản Bootstrap 3 của ví dụ.

Làm cách nào để tôi nhận được tất cả văn bản và đầu vào trên một dòng? Tôi muốn bootstrap 3 Ví dụ để trông giống như ví dụ bootstrap 2 trong jsfiddle

JS fiddle example

<div class="container "> 
    <form> 
     <h3> Format used to look like this in Bootstrap 2 </h3> 
     <div class="row "> 
      <label for="return1"><b>Return:</b></label> 
      <input id="return1" name='return1' class=" input input-sm" style="width:150px" 
       type="text" value='8/28/2013'> 
      <span id='return1' style='color:blue'> +/- 14 Days</span> 
     </div> 

     <br> 
     <br> 
      <h3> BootStrap 3 Version </h3> 

     <div class="row"> 
      <label for="return2"><b>Return:</b></label> 
      <input id="return2" name='return2' class="form-control input input-sm" style="width:150px" 
       type="text" value='8/28/2013'> 
      <span id='return2' style='color:blue'> +/- 14 Days</span> 
     </div> 
    </form> 

cập nhật:. tôi thay đổi mã này mà hoạt động nhưng gặp rắc rối với sự liên kết với doanh nghiệp Bất kỳ ý tưởng.?

<div class="form-group"> 
<div class="row"> 
    <div class="col-xs-3"> 
     <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label> 
    </div> 
    <div class="col-xs-2"> 
     <select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off"> 
      <option >Economy</option> 
      <option >Premium Economy</option> 
      <option >Club World</option> 
      <option >First Class</option> 
     </select> 
    </div> 
</div> 

Answer 1

tôi sẽ đưa từng yếu tố mà bạn muốn inline bên trong một col-MD- * div riêng biệt trong hàng của bạn. Hoặc buộc các yếu tố của bạn hiển thị nội tuyến. Lớp form-control hiển thị khối vì đó là cách bootstrap nghĩ rằng nó nên được thực hiện.

Answer 2

Điều bạn cần là lớp học .form-inline. Bạn cần phải cẩn thận, với lớp .form.inline mới, bạn phải xác định chiều rộng cho mỗi điều khiển.

Hãy xem at this

Answer 3

Trực tiếp từ tài liệu http://getbootstrap.com/css/#forms-horizontal.

Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh nhãn và nhóm điều khiển biểu mẫu theo bố cục ngang bằng cách thêm .form-horizontal vào biểu mẫu (không phải là <form>). Làm như vậy thay đổi .form-groups để hoạt động dưới dạng hàng lưới, do đó không cần .row.

mẫu:

<form class="form-horizontal"> 
    <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> 

Answer 4

Bạn có thể làm điều đó như thế này:

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label for="inputType" class="col-sm-2 control-label">Label</label> 
     <div class="col-sm-4"> 
      <input type="text" class="form-control" id="input" placeholder="Input text"> 
     </div> 
    </div> 
</form> 

Fiddle

Answer 5

Không ai trong số những hoạt động được, phải dùng .form-control-static lớp.

http://getbootstrap.com/css/#forms-controls-static

Answer 6

tất cả xin vui lòng kiểm tra mã cập nhật khi chúng ta phải sử dụng

form-control-static not only form-control 

http://jsfiddle.net/tusharD/58LCQ/34/

nhờ liên quan

Answer 7

Con đường tôi giải quyết nó chỉ đơn giản là để thêm một ghi đè cho tất cả các hộp văn bản của tôi trên trang web chính của tôi, như vậy:

.form-control { 
    display:initial !important; 
} 

Answer 8

Hoặc bạn có thể làm điều này:

<table> 
    <tr> 
    <td><b>Return:</b></td> 
    <td><input id="return1" name='return1' 
       class=" input input-sm" style="width:150px" 
       type="text" value='8/28/2013'></td> 
    </tr> 
</table> 

tôi đã cố gắng mỗi một trong những gợi ý trên và không ai trong số họ làm việc. Tôi không muốn chọn một số cột cố định trong lưới 12 cột. Tôi muốn lời nhắc, và đầu vào ngay sau nó, và tôi muốn các cột để kéo dài khi cần thiết.

Vâng, tôi biết, đó là chống lại những gì bootstrap là tất cả về. Và bạn KHÔNG BAO GIỜ nên sử dụng một cái bàn. Bởi vì DIV tốt hơn nhiều so với bảng. Nhưng vấn đề là các bảng, hàng và các ô thực sự là WORK.

CÓ - TÔI THỰC SỰ KHÔNG biết rằng có những người cuồng nhiệt CSS và phản ứng đầu gối không bao giờ không bao giờ sử dụng TABLE, TR và TD. Có, tôi biết rằng lớp DIV = "bảng" với lớp DIV = "hàng" và lớp DIV = "ô" tốt hơn nhiều. Ngoại trừ khi nó không hoạt động, và có rất nhiều trường hợp. Tôi không tin rằng mọi người nên mù quáng bỏ qua những tình huống đó. Có những lần TABLE/TR/TD sẽ hoạt động tốt, và không có lý do gì để sử dụng một cách tiếp cận phức tạp và dễ vỡ hơn chỉ vì nó được coi là thanh lịch hơn. Một nhà phát triển nên hiểu những lợi ích của các cách tiếp cận khác nhau là gì, và sự cân bằng, và không có quy tắc tuyệt đối nào cho các DIV là tốt hơn.

"Trường hợp điểm - dựa trên thảo luận này tôi đã chuyển đổi một vài tds và trs hiện tại thành divs. 45 phút rối tung với việc cố gắng sắp xếp mọi thứ để xếp hàng cạnh nhau và tôi đã từ bỏ. giây sau - hoạt động - ngay lập tức - trên tất cả các trình duyệt, không có gì để làm. Hãy cố gắng làm cho tôi hiểu - bạn có thể biện minh cho điều gì vì muốn tôi làm điều đó theo bất kỳ cách nào khác! " Xem [https://stackoverflow.com/a/4278073/1758051]

Và điều này: ".

Layout nên dễ Thực tế là có những bài báo viết về cách để đạt được một bố trí ba cột năng động với header và footer trong CSS cho thấy rằng nó là một hệ thống bố trí nghèo Tất nhiên bạn có thể làm cho nó hoạt động, nhưng có hàng trăm bài báo trực tuyến về cách làm điều đó. Có khá nhiều bài viết như vậy cho một bố cục tương tự với các bảng vì nó hiển nhiên rõ ràng. ủng hộ CSS, một thực tế này hoàn tác tất cả: một bố cục ba cột cơ bản trong CSS thường được gọi là "Chén Thánh". [https://stackoverflow.com/a/4964107/1758051]

Tôi chưa thấy cách nào để buộc DIV luôn xếp hàng trong cột trong mọi tình huống. Tôi tiếp tục nhận được những ví dụ tầm thường mà không thực sự chạy vào các vấn đề. "Responsive" sắp cung cấp cách mà chúng sẽ không luôn xếp hàng trong một cột. Tuy nhiên, nếu bạn thực sự muốn một cột, bạn có thể lãng phí giờ cố gắng để có được DIV để làm việc. Đôi khi, bạn cần phải sử dụng công nghệ phù hợp bất kể những gì các zealot nói.

Answer 9

chỉ cho mẹ của div "class =" col-lg-12 ""

<div class="form-group"> 
<div class="row"> 
    <div class="col-xs-3"> 
     <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label> 
    </div> 
    <div class="col-xs-2"> 
     <select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off"> 
      <option >Economy</option> 
      <option >Premium Economy</option> 
      <option >Club World</option> 
      <option >First Class</option> 
     </select> 
    </div> 
</div> 

nó sẽ được

<div class="form-group"> 
<div class-lg-12> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label> 
    </div> 
    <div class="col-xs-2"> 
     <select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off"> 
      <option >Economy</option> 
      <option >Premium Economy</option> 
      <option >Club World</option> 
      <option >First Class</option> 
     </select> 
    </div> 
</div> 
</div>