Bootstrap การป้อนข้อความแบบเต็มความกว้างภายในอินไลน์ฟอร์ม

ฉันดิ้นรนเพื่อสร้างกล่องข้อความที่เหมาะกับความกว้างทั้งหมดของพื้นที่เก็บของฉัน

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

เมื่อฉันทำข้างต้นองค์ประกอบของฟอร์มทั้งสองนั้นเป็นแบบอินไลน์ตามที่คาดไว้ แต่อย่าใช้เวลาเกินสองสามคอลัมน์อย่างดีที่สุด การโฮเวอร์เหนือกองcol-md-12เพลิงแสดงให้เห็นว่าใช้ความกว้างเต็มตามที่คาดหวัง มันเป็นเพียงการป้อนข้อความที่ดูเหมือนจะไม่เต็ม ฉันพยายามเพิ่มค่าความกว้างในบรรทัดด้วย แต่ก็ไม่ได้เปลี่ยนแปลงอะไรเลย ฉันรู้ว่ามันควรจะง่ายเพียงแค่รู้สึกโง่จริง ๆ ตอนนี้

นี่คือซอ: http://jsfiddle.net/52VtD/4119/embedded/result/

แก้ไข:

คำตอบที่เลือกนั้นละเอียดถี่ถ้วนในทุก ๆ ทางและเป็นความช่วยเหลือที่ยอดเยี่ยม มันคือสิ่งที่ฉันใช้ อย่างไรก็ตามฉันคิดว่าปัญหาเริ่มต้นของฉันเป็นปัญหากับเทมเพลต MVC5 เริ่มต้นภายใน Visual Studio 2013 ซึ่งมีอยู่ใน Site.css:

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

เห็นได้ชัดว่ามีการปิดกั้นการป้อนข้อความจากการขยายอย่างเหมาะสม ... คำเตือนที่เป็นธรรมต่อผู้ใช้เทมเพลต ASP.NET ในอนาคต ...

bootstrap docs พูดเกี่ยวกับสิ่งนี้ :

ต้องใช้ความกว้างที่กำหนดเองอินพุตและข้อความเป็นความกว้าง 100% โดยค่าเริ่มต้นใน Bootstrap ในการใช้แบบฟอร์มอินไลน์คุณจะต้องตั้งค่าความกว้างของตัวควบคุมฟอร์มที่ใช้ภายใน

ความกว้างเริ่มต้นของ 100% เป็นองค์ประกอบแบบฟอร์มทั้งหมดที่ได้รับเมื่อพวกเขาได้เรียนform-controlไม่ได้ใช้ถ้าคุณใช้form-inlineชั้นเรียนในแบบฟอร์มของคุณ

คุณสามารถดู bootstrap.css (หรือ .less สิ่งที่คุณต้องการ) ที่คุณจะได้พบกับส่วนนี้:

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

    [...]
  }
}

บางทีคุณควรดูที่กลุ่มอินพุตเนื่องจากฉันเดาว่าพวกเขามีมาร์กอัปที่คุณต้องการใช้ (ซอทำจากตรงนี้ ):

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

ดูสิ่งนี้:

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

ตามที่ระบุไว้ในคำถามที่คล้ายกันลองลบอินสแตนซ์ของinput-groupชั้นเรียนและดูว่าจะช่วยได้หรือไม่

อ้างถึง bootstrap:

ส่วนควบคุมแบบฟอร์มส่วนบุคคลจะได้รับสไตล์สากลโดยอัตโนมัติ ข้อความและองค์ประกอบทั้งหมดที่มี. form-control ถูกตั้งค่าเป็น width: 100%; โดยค่าเริ่มต้น. ห่อป้ายกำกับและตัวควบคุมใน. form-group เพื่อการเว้นวรรคที่เหมาะสม

ลองทำตามวิธีด้านล่างเพื่อให้ได้ผลลัพธ์ตามที่คุณต้องการ

input {
    max-width: 100%;
}

ด้วย Bootstrap> 4.1 เป็นกรณีของการใช้คลาสยูทิลิตี้ flexbox เพียงแค่มีคอนเทนเนอร์ flexbox ภายในคอลัมน์ของคุณจากนั้นให้องค์ประกอบทั้งหมดที่อยู่ในชั้น "flex-fill" เช่นเดียวกับแบบฟอร์มอินไลน์คุณจะต้องตั้งค่าระยะขอบ / ระยะห่างระหว่างองค์ประกอบด้วยตัวคุณเอง

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