Bootstrap input teks lebar penuh dalam inline-form

Saya berjuang untuk membuat kotak teks yang sesuai dengan seluruh lebar area kontainer saya .

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

Ketika saya melakukan hal di atas, dua elemen bentuk in-line, seperti yang saya harapkan, tetapi jangan mengambil lebih dari beberapa kolom, paling banter. Melayang di atas col-md-12div di pembakar menunjukkan itu mengambil lebar penuh yang diharapkan. Hanya input teks yang sepertinya tidak terisi. Saya bahkan mencoba menambahkan nilai lebar sebaris tetapi tidak mengubah apa pun. Saya tahu ini harus sederhana, hanya merasa benar-benar bodoh sekarang.

Berikut ini biola: http://jsfiddle.net/52VtD/4119/embedded/result/

EDIT:

Jawaban yang dipilih menyeluruh dalam segala hal dan bantuan yang luar biasa. Itulah yang akhirnya saya gunakan. Namun saya pikir masalah awal saya sebenarnya adalah masalah dengan template MVC5 default dalam Visual Studio 2013. Ini berisi ini di Site.css:

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

Jelas itu menghalangi input teks agar tidak berkembang dengan benar ... Peringatan yang wajar untuk pengguna templat ASP.NET di masa mendatang ...

Dokumen bootstrap mengatakan tentang ini :

Membutuhkan lebar khusus. Input, pilihan, dan textareas adalah 100% lebar secara default di Bootstrap. Untuk menggunakan formulir sebaris, Anda harus mengatur lebar pada kontrol formulir yang digunakan di dalam.

Lebar default 100% karena semua elemen formulir mendapat ketika mereka mendapat kelas form-controltidak berlaku jika Anda menggunakan form-inlinekelas pada formulir Anda.

Anda bisa melihat pada bootstrap.css (atau .less, apa pun yang Anda suka) di mana Anda akan menemukan bagian ini:

.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%;
    }

    [...]
  }
}

Mungkin Anda harus melihat pada kelompok input , karena saya kira mereka memiliki markup yang ingin Anda gunakan (bekerja di sini ):

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

lihat sesuatu seperti ini:

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

Seperti yang dinyatakan dalam pertanyaan serupa , coba hapus instance input-groupkelas dan lihat apakah itu membantu.

merujuk ke bootstrap:

Kontrol formulir individual secara otomatis menerima beberapa gaya global. Semua teks,, dan elemen dengan .form-control diatur ke lebar: 100%; secara default. Bungkus label dan kontrol dalam .form-group untuk penspasian optimal.

Coba sesuatu seperti di bawah ini untuk mencapai hasil yang Anda inginkan

input {
    max-width: 100%;
}

Dengan Bootstrap> 4.1, ini hanya kasus menggunakan kelas utilitas flexbox. Hanya memiliki wadah flexbox di dalam kolom Anda, dan kemudian berikan semua elemen di dalamnya kelas "flex-fill". Seperti formulir inline, Anda harus mengatur sendiri margin / elemen pada elemen.

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