2017-11-13 1 views
1

select 인 입력 그룹이 input의 시뮬레이트 렌더링을 사용하지 않는 이유는 무엇입니까?부트 스트랩 : 입력 그룹 및 높이 선택

select 상대도 input-group을 원합니다.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="input-group"> 
 
    <input type="text" class="form-control"> 
 
    <span class="input-group-addon"> 
 
    <button type="submit" class="btn btn-info"> 
 
     <i class="fa fa-3x fa-search" aria-hidden="true"></i> 
 
    </button> 
 
    </span> 
 
</div> 
 

 
<br> 
 

 
<div class="input-group"> 
 
    <select class="form-control"> 
 
    <option> 
 
     Option 1 
 
    </option> 
 
    </select> 
 
    <span class="input-group-addon"> 
 
    <button type="submit" class="btn btn-info"> 
 
     <i class="fa fa-3x fa-search" aria-hidden="true"></i> 
 
    </button> 
 
    </span> 
 
</div>

감사합니다 아주 많이 :)

답변

2

그냥 다음과 같이 양식 스타일 시트에 한 줄을 편집

select.form-control:not([size]):not([multiple]) { 
 
    height: auto!important; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="input-group"> 
 
    <input type="text" class="form-control"> 
 
    <span class="input-group-addon"> 
 
    <button type="submit" class="btn btn-info"> 
 
     <i class="fa fa-3x fa-search" aria-hidden="true"></i> 
 
    </button> 
 
    </span> 
 
</div> 
 

 
<br> 
 

 
<div class="input-group"> 
 
    <select class="form-control"> 
 
    <option> 
 
     Option 1 
 
    </option> 
 
    </select> 
 
    <span class="input-group-addon"> 
 
    <button type="submit" class="btn btn-info"> 
 
     <i class="fa fa-3x fa-search" aria-hidden="true"></i> 
 
    </button> 
 
    </span> 
 
</div>

관련 문제