인라인 형태의 부트 스트랩 전폭 텍스트 입력

컨테이너 영역 의 전체 너비에 맞는 텍스트 상자를 만드는 데 어려움을 겪고 있습니다.

<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-12firebug 에서 div 위로 마우스를 가져 가면 예상 전체 너비를 차지합니다. 채우지 않는 텍스트 입력일뿐입니다. 인라인 너비 값을 추가하려고 시도했지만 아무것도 변경되지 않았습니다. 나는 이것이 단순해야한다는 것을 알고 있습니다.

여기 바이올린이 있습니다 : http://jsfiddle.net/52VtD/4119/embedded/result/

편집하다:

선택된 답변은 모든면에서 철저하고 훌륭한 도움입니다. 내가 결국 사용했던 것입니다. 그러나 초기 문제는 실제로 Visual Studio 2013의 기본 MVC5 템플릿에 문제가 있다고 생각합니다. Site.css에 다음이 포함되어 있습니다.

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

분명히 그것은 텍스트 입력이 적절하게 확장되는 것을 막고있었습니다 ... 미래의 ASP.NET 템플릿 사용자에게 공정한 경고 ...

부트 스트랩 문서 는 이것에 대해 말합니다 :

사용자 정의 너비 필요 부트 스트랩에서 입력, 선택 및 텍스트 영역의 너비는 기본적으로 100 %입니다. 인라인 양식을 사용하려면 사용 된 양식 컨트롤에서 너비를 설정해야합니다.

폼에서 클래스 form-control를 사용하는 경우 form-inline클래스를 적용 했을 때 모든 폼 요소가 적용되므로 기본 너비는 100 % 입니다.

이 부분을 찾을 수있는 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%;
    }

    [...]
  }
}

아마도 당신은 input-groups을 살펴보아야 할 것입니다. 왜냐하면 그들은 그들이 사용하고자하는 마크 업을 정확하게 가지고 있기 때문입니다 ( 여기서 바이올린 사용 ).

<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 클래스의 하고 도움이되는지 확인하십시오.

부트 스트랩 참조 :

개별 양식 컨트롤은 일부 글로벌 스타일을 자동으로받습니다. .form-control을 가진 모든 textual, 및 요소는 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>