Satır içi formda önyükleme tam genişlikte metin girişi

Konteyner alanımın tüm genişliğine uyan bir metin kutusu oluşturmak için uğraşıyorum .

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

Yukarıdakileri yaptığımda, iki form öğesi beklediğim gibi sıralı, ancak en iyi ihtimalle birkaç sütundan fazlasını almayın. col-md-12Firebug'daki div'ın üzerine gelmesi, beklenen tam genişliği aldığını gösterir. Sadece doldurulmayan metin girişi. Hatta bir satır içi genişliği değeri eklemeyi denedim ama hiçbir şey değişmedi. Bunun basit olması gerektiğini biliyorum, şimdi çok aptal hissediyorum.

İşte bir keman: http://jsfiddle.net/52VtD/4119/embedded/result/

DÜZENLE:

Seçilen cevap her şekilde ayrıntılı ve harika bir yardım. Sonunda bunu kullandım. Ancak ilk sorunum aslında Visual Studio 2013 içinde varsayılan MVC5 şablonu ile ilgili bir sorun olduğunu düşünüyorum. Site.css bu içeriyordu:

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

Açıkçası bu metin girişinin uygun şekilde genişlemesini engelliyordu ... Gelecekteki ASP.NET şablon kullanıcılarına adil uyarı ...

Bootstrap dokümanlar bu konuda şunları söylüyor :

Özel genişlikler gerektirir Girişler, seçimler ve textareas, Bootstrap'ta varsayılan olarak% 100 genişliğindedir. Satır içi formu kullanmak için, içinde kullanılan form denetimlerinde bir genişlik ayarlamanız gerekir.

Onlar sınıf aldığımda tüm form elemanları olarak% 100'lük varsayılan genişliği alır form-controlkullanırsanız geçerli değildi form-inlineformunuzda sınıfı.

Bu bölümü bulacağınız bootstrap.css (ya da .less, neyi tercih ederseniz edin) konusuna bir göz atabilirsiniz:

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

    [...]
  }
}

Belki de giriş gruplarına bir göz atmalısınız , çünkü tam olarak kullanmak istediğiniz işaretlemeye sahipler ( burada keman çalışıyor ):

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

böyle bir şeye bir göz atın:

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

Benzer bir soruda belirtildiği gibi , input-groupsınıfın örneklerini kaldırmayı deneyin ve bunun yardımcı olup olmadığını görün.

önyükleme ile ilgili:

Tek tek form denetimleri otomatik olarak bazı genel stiller alır. .Form-kontrolüne sahip tüm metinsel öğeler ve öğeler genişliğe ayarlanmıştır:% 100; varsayılan olarak. Optimum aralık için etiketleri ve kontrolleri .form-grubuna sarın.

İstediğiniz sonucu elde etmek için aşağıdaki gibi bir şey deneyin

input {
    max-width: 100%;
}

Bootstrap> 4.1 ile bu sadece flexbox yardımcı programı sınıflarını kullanmanın bir örneğidir. Sütunun içinde bir flexbox konteyneri var ve içindeki tüm elemanları "flex-fill" sınıfına ver. Satır içi formlarda olduğu gibi, öğelerin kenar boşluklarını / dolgusunu kendiniz ayarlamanız gerekir.

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