가변 크기 레이블을 사용하여 컨테이너의 전체 너비로 펼치기 양식 입력 받기

Question

SO에 대한 몇 가지 게시물이 컨테이너에 내용을 확장하는 종류입니다. 그 중 가변 폭을 가진 인라인 레이블이있을 때 폼 컨트롤의 너비를 컨테이너로 확장하는 사용 사례를 다루지는 않습니다.

레이블의 크기를 원하는대로 지정하고 텍스트 필드를 나머지 너비로 확장합니다. 퍼팅 폭 : 100 %는 다음 라인으로 부딪칩니다. 여기

코드 예제입니다 http://codepen.io/anon/pen/GWgraK

<form class="form-inline"> 
    <div class="row"> 
    <div class="form-group string optional bc_search_last_name"> 
     <label class="string optional control-label" for="bc_search_last_name">label</label> 
     <input class="string optional form-control" type="text" name="bc_search[last_name]" id="bc_search_last_name"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="form-group string optional bc_search_first_name"> 
     <label class="string optional control-label" for="bc_search_first_name">Really long label</label> 
     <input class="string optional form-control" type="text" name="bc_search[first_name]" id="bc_search_first_name"> 
    </div> 
    </div> 
</form> 

및 말대꾸 CSS를

.form-inline 
    width: 600px 
    border: 1px dotted black 
    position: relative 
    left: 50px 
    top: 50px 
    padding-left: 20px 
    padding-top: 5px 

    .form-group 
    margin-bottom: 10px 
    width: 100% 

    .control-label 
    padding: 6px 9px 6px 6px 
    border: 1px solid #ccc 
    border-right: 0 
    border-radius: 5px 0 0 5px 
    background-color: rgba(179, 177, 177, 0.28) 
    float: left 

    .form-control 
    width: auto 
    float: left 

Answer 1

수레 대신 인 flexbox를 사용해보십시오

.form-group {display: flex} 
    .form-control {flex: 1} 

http://codepen.io/tuiaverde/pen/KWwWNX

Answer 2

입력이 가능한을 채우기 위해 성장 당신은 입력에 부모에 display: flex; 및 flex-grow: 1;을 사용할 수 있습니다

공간.

.form-inline { 
 
    width: 600px; 
 
    border: 1px dotted black; 
 
    position: relative; 
 
    left: 50px; 
 
    top: 50px; 
 
    padding: 10px 10px 0; 
 
} 
 
.form-inline .form-group { 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
} 
 
.form-inline .control-label { 
 
    padding: 6px 9px 6px 6px; 
 
    border: 1px solid #ccc; 
 
    border-right: 0; 
 
    border-radius: 5px 0 0 5px; 
 
    background-color: rgba(179, 177, 177, 0.28); 
 
} 
 

 
.form-inline .form-group { 
 
    display: flex!important; 
 
} 
 
.form-group input { 
 
    flex-grow: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-inline"> 
 
    <div> 
 
    <div class="form-group string optional bc_search_last_name"><label class="string optional control-label" for="bc_search_last_name">label</label><input class="string optional form-control" type="text" name="bc_search[last_name]" id="bc_search_last_name"></div> 
 
    </div> 
 
    <div> 
 
    <div class="form-group string optional bc_search_first_name"><label class="string optional control-label" for="bc_search_first_name">Really long label</label><input class="string optional form-control" type="text" name="bc_search[first_name]" id="bc_search_first_name"></div> 
 
    </div> 
 
</form>