Отзывчивый сетка с входной группой

Question

Как я могу сделать это отзывчивые (имеющие входы жидкость, чтобы заполнить все пространство):

Имейте в виде, что мне нужно inputgroups и входы стройных прямо к тому же! Ширина входной группы-btn: 0 - (возможно, не идеальный) трюк, чтобы вставлять входы прямо друг от друга.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 

 
    <div class="col-md-6 col-xs-12"> 
 
    
 
<div class="input-group"> 
 
    <label>Strasse</label> 
 
    <input type="text" class="form-control" value="strasse" /> 
 
    
 
     
 
    <span class="input-group-btn" style="width:0px;"></span> 
 
    <label>PLZ</label> 
 
     <input type="text" class="form-control" value="plz" style="margin-left:-1px" /></div> 
 
     
 
     
 
    </div> 
 
    <div class="col-md-6 col-xs-12"> 
 
     
 
<div class="input-group"> 
 
    <label>Zimmer</label> 
 
    <select class="form-control input-sm" ><option>ha</option><option>hi</option></select> 
 
    <span class="input-group-btn" style="width:0px;"></span> 
 
    <label>Etage</label> 
 
    <select class="form-control input-sm" ><option>ha</option><option>hi</option></select> 
 
    <span class="input-group-btn" style="width:0px;"></span> 
 
    <label>Lift</label> 
 
    <select class="form-control input-sm" ><option>ha</option><option>hi</option></select> 
 
</div>  
 
     
 
      </div> <!-- end form-group --> 
 
     
 
     
 
    </div>

Вы можете проверить, минимизируя и изменение размеров окна браузера.

Answer 1

может быть, что вы должны сделать, это обернуть типы входных данных в седловине,

игра с сниппета-код:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
    <div class="row"> 
 

 
    
 
    
 
<div class="input-group"> 
 
<div class="col-md-6 col-xs-12" style="padding:0;"> 
 
    <label>Strasse</label> 
 
    <input type="text" class="form-control" value="strasse" /> 
 
    </div> 
 
    <div class="col-md-6 col-xs-12" style="padding:0;"> 
 
     
 
    <span class="input-group-btn" style="width:0px;"></span> 
 
    <label>PLZ</label> 
 
     <input type="text" class="form-control" value="plz" style="margin-left:-1px" /></div> 
 
     
 
     
 

 

 
<div class="col-md-4 col-xs-4" style="padding:0;"> 
 
    <label>Zimmer</label> 
 
    <select class="form-control input-sm" ><option>ha</option><option>hi</option></select> 
 
    <span class="input-group-btn" style="width:0px;"></span> 
 
</div> 
 
<div class="col-md-4 col-xs-4" style="padding:0;"> 
 
    <label>Etage</label> 
 
    <select class="form-control input-sm" ><option>ha</option><option>hi</option></select> 
 
    <span class="input-group-btn" style="width:0px;"></span> 
 
</div> 
 
<div class="col-md-4 col-xs-4" style="padding:0;"> 
 
    <label>Lift</label> 
 
    <select class="form-control input-sm" ><option>ha</option><option>hi</option></select> 
 
</div> 
 
      </div> <!-- end form-group --> 
 
     
 
     
 
    </div> 
 
</div>

EDIT: жёстко style="padding:0;" переопределить по умолчанию CSS