Bootstrap-Texteingabe in voller Breite in Inline-Form

Ich habe Probleme, ein Textfeld zu erstellen, das über die gesamte Breite meines Containerbereichs passt .

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

Wenn ich das oben genannte mache, sind die beiden Formularelemente wie erwartet in einer Linie, nehmen aber bestenfalls nicht mehr als ein paar Spalten ein. Wenn Sie col-md-12im Firebug über dem Div schweben, wird angezeigt, dass es die erwartete volle Breite einnimmt. Es ist nur die Texteingabe, die nicht zu füllen scheint. Ich habe sogar versucht, einen Inline-Breitenwert hinzuzufügen, aber er hat nichts geändert. Ich weiß, das sollte einfach sein und mich jetzt wirklich dumm fühlen.

Hier ist eine Geige: http://jsfiddle.net/52VtD/4119/embedded/result/

BEARBEITEN:

Die ausgewählte Antwort ist in jeder Hinsicht gründlich und eine wunderbare Hilfe. Es ist das, was ich letztendlich benutzt habe. Ich denke jedoch, dass mein anfängliches Problem tatsächlich ein Problem mit der Standard-MVC5-Vorlage in Visual Studio 2013 war. Sie enthielt Folgendes in Site.css:

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

Offensichtlich verhinderte dies, dass die Texteingabe angemessen erweitert wurde ... Faire Warnung an zukünftige Benutzer von ASP.NET-Vorlagen ...

In den Bootstrap-Dokumenten heißt es dazu :

Erfordert benutzerdefinierte Breiten Eingaben, Auswahlen und Textbereiche sind in Bootstrap standardmäßig 100% breit. Um das Inline-Formular zu verwenden, müssen Sie eine Breite für die darin verwendeten Formularsteuerelemente festlegen.

Die Standardbreite von 100%, die alle Formularelemente erhalten, wenn sie die Klasse erhalten form-controlhaben, wurde nicht angewendet, wenn Sie die verwendenform-inline Klasse in Ihrem Formular verwenden.

Sie können sich die Datei bootstrap.css (oder .less, was auch immer Sie bevorzugen) ansehen, in der Sie diesen Teil finden:

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

    [...]
  }
}

Vielleicht sollten Sie einen Blick auf nehmen Input-Gruppen , da ich denke , sie haben genau das Markup die Sie verwenden möchten (Arbeits Geige hier ):

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

Schauen Sie sich so etwas an:

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

Versuchen Sie, wie in einer ähnlichen Frage angegeben , Instanzen der input-groupKlasse zu entfernen, und prüfen Sie, ob dies hilfreich ist.

unter Bezugnahme auf Bootstrap:

Einzelne Formularsteuerelemente erhalten automatisch ein globales Styling. Alle Text- und Elemente mit .form-control sind auf width eingestellt: 100%; standardmäßig. Wickeln Sie Etiketten und Steuerelemente für einen optimalen Abstand in die Formgruppe ein.

Versuchen Sie etwas wie unten, um das gewünschte Ergebnis zu erzielen

input {
    max-width: 100%;
}

Bei Bootstrap> 4.1 müssen nur die Flexbox-Dienstprogrammklassen verwendet werden. Stellen Sie einfach einen Flexbox-Container in Ihre Spalte und geben Sie dann allen darin enthaltenen Elementen die Klasse "Flex-Fill". Wie bei Inline-Formularen müssen Sie die Ränder / Auffüllungen für die Elemente selbst festlegen.

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