Bootstrap nhập văn bản toàn chiều rộng trong mẫu nội tuyến

Tôi đang vật lộn để tạo ra một hộp văn bản phù hợp với toàn bộ chiều rộng của khu vực chứa của tôi .

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

Khi tôi làm như trên, hai yếu tố hình thức là thẳng hàng, như tôi mong đợi, nhưng tốt nhất là không chiếm nhiều hơn một vài cột. Di chuột qua col-md-12div trong firebird cho thấy nó chiếm hết chiều rộng dự kiến. Đó chỉ là kiểu nhập văn bản dường như không điền. Tôi thậm chí đã thử thêm một giá trị độ rộng trong dòng nhưng nó không thay đổi gì cả. Tôi biết điều này nên đơn giản, chỉ cảm thấy thực sự ngu ngốc bây giờ.

Đây là một câu đố: http://jsfiddle.net/52VtD/4119/embedded/result/

BIÊN TẬP:

Câu trả lời được lựa chọn là kỹ lưỡng trong mọi cách và một sự trợ giúp tuyệt vời. Đó là những gì tôi đã sử dụng. Tuy nhiên, tôi nghĩ rằng vấn đề ban đầu của tôi thực sự là một vấn đề với mẫu MVC5 mặc định trong Visual Studio 2013. Nó chứa vấn đề này trong Site.css:

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

Rõ ràng là đã chặn đầu vào văn bản mở rộng một cách thích hợp ... Cảnh báo công bằng cho người dùng mẫu ASP.NET trong tương lai ...

Các tài liệu bootstrap nói về điều này :

Yêu cầu độ rộng tùy chỉnh Đầu vào, chọn và textareas rộng 100% theo mặc định 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.

Độ rộng mặc định là 100% vì tất cả các thành phần của biểu mẫu nhận được khi chúng có lớp form-controlkhông áp dụng nếu bạn sử dụng form-inlinelớp trên biểu mẫu của mình.

Bạn có thể xem bootstrap.css (hoặc .less, bất cứ điều gì bạn thích) nơi bạn sẽ tìm thấy phần này:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Có lẽ bạn nên xem các nhóm đầu vào , vì tôi đoán họ có chính xác đánh dấu bạn muốn sử dụng (làm việc ở đây ):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

có một cái nhìn như thế này:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

Như đã nêu trong một câu hỏi tương tự , hãy thử loại bỏ các thể hiện của input-grouplớp và xem nếu điều đó có ích.

tham chiếu đến bootstrap:

Điều khiển biểu mẫu cá nhân tự động nhận được một số kiểu dáng toàn cầu. Tất cả văn bản và các thành phần có kiểm soát .form được đặt thành chiều rộng: 100%; theo mặc định Bọc nhãn và điều khiển trong nhóm .form để có khoảng cách tối ưu.

Hãy thử một cái gì đó như dưới đây để đạt được kết quả mong muốn của bạn

input {
    max-width: 100%;
}

Với Bootstrap> 4.1, đây chỉ là trường hợp sử dụng các lớp tiện ích flexbox. Chỉ cần có một hộp chứa flexbox bên trong cột của bạn, và sau đó cung cấp cho tất cả các thành phần trong đó lớp "flex-fill". Như với các biểu mẫu nội tuyến, bạn sẽ cần phải tự thiết lập lề / phần đệm cho các phần tử.

.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-12">
		<div class="d-flex">
			<label class="flex-fill prop-label">Label:</label>
			<input type="text" class="flex-fill form-control prop-field">
		</div>
	</div>
</div>