Độ rộng đầu vào trên Bootstrap 3

Cập nhật lại: Tôi đang đóng câu hỏi này bằng cách chọn câu trả lời hàng đầu để ngăn mọi người thêm câu trả lời mà không thực sự hiểu câu hỏi. Trong thực tế, không có cách nào để làm điều đó với chức năng xây dựng mà không sử dụng lưới hoặc thêm css. Các lưới không hoạt động tốt nếu bạn đang xử lý help-blockcác yếu tố cần vượt ra ngoài một đầu vào ngắn chẳng hạn nhưng chúng là 'tích hợp'. Nếu đó là một vấn đề tôi khuyên bạn nên sử dụng các lớp css bổ sung mà bạn có thể tìm thấy trong cuộc thảo luận BS3 ở đây . Bây giờ BS4 đã ra, có thể sử dụng các kiểu định cỡ đi kèm để quản lý việc này vì vậy điều này sẽ không còn phù hợp lâu nữa. Cảm ơn tất cả cho đầu vào tốt cho câu hỏi SO phổ biến này.

Cập nhật: Câu hỏi này vẫn mở vì nó là về tích hợp chức năng trong BS để quản lý rộng đầu vào mà không cần đến lưới (đôi khi họ phải được quản lý một cách độc lập). Tôi đã sử dụng các lớp tùy chỉnh để quản lý điều này vì vậy đây không phải là cách thực hiện trên css cơ bản. Nhiệm vụ này nằm trong danh sách thảo luận về tính năng của BS và vẫn chưa được giải quyết.

Câu hỏi gốc: Bất cứ ai cũng tìm ra cách quản lý độ rộng đầu vào trên BS 3? Tôi hiện đang sử dụng một số lớp tùy chỉnh để thêm chức năng đó nhưng tôi có thể đã bỏ lỡ một số tùy chọn không có tài liệu.

Các tài liệu hiện tại nói rằng sử dụng .col-lg-x nhưng rõ ràng nó không hoạt động vì nó chỉ có thể được áp dụng cho div container mà sau đó gây ra tất cả các loại vấn đề bố cục / float.

Đây là một câu đố. Điều kỳ lạ là trên fiddle tôi thậm chí không thể thay đổi nhóm biểu mẫu để thay đổi kích thước.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Những gì bạn muốn làm là chắc chắn có thể đạt được.

Những gì bạn muốn là bọc mỗi "nhóm" liên tiếp, không phải toàn bộ biểu mẫu chỉ với một hàng. Đây:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

Jsfiddle MỚI tôi đã thực hiện: jsfiddle MỚI

Lưu ý rằng trong fiddle mới, tôi cũng đã thêm 'col-xs-5' để bạn cũng có thể thấy nó trong các màn hình nhỏ hơn - loại bỏ chúng không tạo ra sự khác biệt. Nhưng hãy nhớ trong các lớp học ban đầu của bạn, bạn chỉ đang sử dụng 'col-lg-1'. Điều đó có nghĩa là nếu chiều rộng màn hình nhỏ hơn kích thước truy vấn phương tiện 'lg', thì hành vi khối mặc định được sử dụng. Về cơ bản chỉ bằng cách áp dụng 'col-lg-1', logic bạn sử dụng là:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

Xem hệ thống lưới Bootstrap 3 để biết thêm. Tôi hy vọng tôi đã rõ ràng nếu không cho tôi biết và tôi sẽ giải thích.

Trong Bootstrap 3

Bạn chỉ có thể tạo một kiểu tùy chỉnh:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Sau đó thêm nó vào mẫu điều khiển như vậy:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

Bằng cách này, bạn không phải đặt thêm đánh dấu cho bố cục trong HTML của mình.

ASP.net MVC đi đến Content- Site.css và xóa hoặc nhận xét dòng này:

input,
select,
textarea {
    /*max-width: 280px;*/
}

Tôi nghĩ rằng bạn cần phải bọc các đầu vào bên trong a col-lg-4, và sau đó bên trong form-groupvà tất cả được chứa trong một form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Bản trình diễn trên Bootply - http://bootply.com/78156

EDIT: Từ tài liệu Bootstrap 3 ..

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

Vì vậy, một tùy chọn khác là đặt chiều rộng cụ thể bằng CSS:

.form-control {
    width:100px;
}

Hoặc, áp dụng col-sm-*cho 'nhóm biểu mẫu'.

Các tài liệu hiện tại nói rằng sử dụng .col-xs-x, không có lg. Sau đó, tôi thử trong fiddle và nó dường như hoạt động:

http://jsfiddle.net/tX3ae/225/

để giữ bố cục, có thể bạn có thể thay đổi nơi bạn đặt "hàng" lớp như thế này:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

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

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

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

Thêm lớp vào form.group để ràng buộc các đầu vào

Nếu bạn đang sử dụng mẫu Master.Site trong Visual Studio 15, dự án cơ sở có "Site.css", QUÁ NHIỀU chiều rộng của các trường điều khiển biểu mẫu.

Tôi không thể có được chiều rộng của các hộp văn bản của mình để có thể rộng hơn khoảng 300px. Tôi đã thử MỌI THỨ và không có gì hiệu quả. Tôi thấy rằng có một cài đặt trong Site.css đã gây ra sự cố.

Loại bỏ điều này và bạn có thể kiểm soát độ rộng trường của bạn.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

Tôi biết đây là một chủ đề cũ, nhưng tôi đã gặp vấn đề tương tự với một hình thức nội tuyến và không có tùy chọn nào ở trên giải quyết được vấn đề. Vì vậy, tôi đã sửa mẫu nội tuyến của mình như vậy: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

Đó là giải pháp của tôi. Bit hacky hack, nhưng đã thực hiện công việc cho một hình thức nội tuyến.

Bạn có thể thêm thuộc tính style hoặc bạn có thể thêm định nghĩa cho thẻ đầu vào trong tệp css.

Tùy chọn 1: thêm thuộc tính style

<input type="text" class="form-control" id="ex1" style="width: 100px;">

Tùy chọn 2: định nghĩa trong css

input{
  width: 100px
}

Bạn có thể thay đổi 100px trong tự động

Tôi hy vọng tôi có thể giúp đỡ.

Trong Bootstrap 3

Tất cả các phần tử văn bản <input>, <textarea> và <select> có .form-control được đặt thành width: 100%; theo mặc định

http://getbootstrap.com/css/#forms-example

Dường như, trong một số trường hợp, chúng ta phải đặt thủ công độ rộng tối đa mà chúng ta muốn cho các đầu vào.

Dù sao, ví dụ của bạn hoạt động. Chỉ cần kiểm tra nó với một màn hình lớn, như vậy bạn có thể thấy các trường tên và email sẽ nhận được 2/12 với (col-lg-1 + col-lg-1 và bạn có 12 cột). Nhưng nếu bạn có màn hình nhỏ hơn (chỉ thay đổi kích thước trình duyệt của bạn), các đầu vào sẽ mở rộng cho đến hết hàng.

Bạn không cần phải từ bỏ css đơn giản :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Nếu bạn đang tìm cách đơn giản là giảm hoặc tăng độ rộng của các yếu tố đầu vào của Bootstrap theo ý thích của bạn, tôi sẽ sử dụng max-widthtrong CSS.

Đây là một ví dụ rất đơn giản tôi đã tạo:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Tôi đã đặt chiều rộng tối đa của toàn bộ biểu mẫu thành 500px. Bằng cách này, bạn sẽ không cần sử dụng bất kỳ hệ thống lưới nào của Bootstrap và nó cũng sẽ giữ cho biểu mẫu phản hồi.

Tôi cũng đang vật lộn với vấn đề tương tự, và đây là giải pháp của tôi.

Nguồn HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Bao gồm mã đầu vào với một lớp div khác

Nguồn CSS

.input_width{
   width: 450px;
}

cung cấp bất kỳ cài đặt chiều rộng hoặc lề trên lớp div được bảo hiểm.

Chiều rộng đầu vào của Bootstrap luôn được mặc định là 100%, vì vậy chiều rộng được theo chiều rộng được bảo hiểm đó.

Đây không phải là cách tốt nhất, nhưng giải pháp dễ nhất và duy nhất mà tôi đã giải quyết được vấn đề.

Hy vọng điều này sẽ giúp.

Tôi không biết tại sao mọi người dường như bỏ qua tệp site.css trong thư mục Nội dung. Nhìn vào dòng 22 trong tệp này và bạn sẽ thấy các cài đặt cho đầu vào được kiểm soát. Có vẻ như trang web của bạn không tham chiếu biểu định kiểu này.

Tôi đã thêm điều này:

input, select, textarea { max-width: 280px;}

để fiddle của bạn và nó hoạt động tốt.

Bạn không bao giờ nên cập nhật bootstrap.css hoặc bootstrap.min.css. Làm như vậy sẽ khiến bạn thất bại khi bootstrap được cập nhật. Đó là lý do tại sao tập tin site.css được bao gồm. Đây là nơi bạn có thể thực hiện các thay đổi cho trang web vẫn sẽ cung cấp cho bạn thiết kế đáp ứng mà bạn đang tìm kiếm.

Đây là câu đố với nó làm việc

Thêm và định nghĩa các thuật ngữ cho trường style=""đầu vào, đó là cách dễ nhất để thực hiện: Ví dụ:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap sử dụng lớp 'form-input' để kiểm soát các thuộc tính của 'trường đầu vào'. Đơn giản, hãy thêm lớp 'đầu vào mẫu' của riêng bạn với chiều rộng, đường viền, kích thước văn bản, v.v. trong tệp css hoặc phần đầu của bạn.

(hoặc cách khác, trực tiếp thêm mã nội tuyến size = '5' trong các thuộc tính đầu vào trong phần thân.)

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Bootstrap 3 Tôi đã đạt được một bố cục biểu mẫu phản hồi tốt bằng cách sử dụng như sau:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>