Question

我如何才能使这个响应（输入流体填满整个空间）：

请记住，除此之外我还需要输入组和输入！ Input-group-btn width：0是一个（可能不是完美的）技巧，可以将输入放在彼此之外。

＆＃13;

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

＆＃13;

您可以通过最小化和调整浏览器窗口大小来进行检查。

Answer 1

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

使用代码段代码：

＆＃13;

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

＆＃13;

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

具有输入组的响应式网格

1 个答案: