引导输入组插件拆分

Question

当尝试使我的网站具有移动响应能力时，我遇到了输入组插件从文本框中分离的问题。我提到了这个问题。但我没有使用任何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>

我的输出是：

在此处输入图像描述

Answer 1

为元素的容器提供特定的宽度。

   #date_container{
    width : <value>px;
   }