Bootstrap輸入組插件分割

Question

當試圖使我的網站移動響應時，我遇到了輸入組插件正在從文本框分裂的問題。我提到了this的問題。但我沒有在這裏使用任何col-md -.... s或col-xs -....。

我的代碼是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="bottom_section_vide" class="well"> 
 
    <div id="date_container_panel" align="center"> 
 
    <div id="date_container" class="panel-body"> 
 
     <form id="date_form" role="form" class="form-inline row"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> 
 
      <input class="form-control" id="checkin_field" type="text" placeholder="Check In" aria-describedby="basic-addon2" /> 
 
      <i class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-calendar btn-link" id="chin_cla"></i></i> 
 
      </div> 
 
     </div>&emsp;&emsp; 
 
     <div class="form-group"> 
 
      <div class="input-group"> 
 
      <input class="form-control" id="checkout_field" type="text" placeholder="Check Out" aria-describedby="basic-addon3" disabled /> 
 
      <i class="input-group-addon" id="basic-addon3"><i class="glyphicon glyphicon-calendar btn-link" id="chout_cla"></i></i> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

我的輸出是：

enter image description here

Answer 1

給一個特定的寬度與元件的容器。

#date_container{ 
    width : <value>px; 
    }