css - 具有输入组的响应式网格

Question

我怎样才能让它响应(让输入流畅地填充整个空间):

请记住，我还需要 inputgroups 和 inputs slim! Input-group-btn width: 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

也许你应该做的是将输入类型包装在 col 中，

使用片段代码:

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

编辑:硬编码 style="padding:0;" 以覆盖默认 CSS