Bootstrap输入组插件分割

当试图使我的网站移动响应时，我遇到了输入组插件正在从文本框分裂的问题。我提到了this的问题。但我没有在这里使用任何col-md -.... s或col-xs -....。Bootstrap输入组插件分割

我的代码是：

<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

来源

2016-05-30 Thishani Lucas

您的示例似乎按照预期的方式工作。你应该添加你申请的任何CSS。 – vanburen

@vanburen我的CSS： @media（max-width：767px）{ #checkin_field，#checkout_field { height：15px; width：140px; 外观：无; box-shadow：none; border-radius：0; font-size：14px; } –

@vanburen这是jsfiddle链接https://jsfiddle.net/#&togetherjs=a5vUN0zELL –

给一个特定的宽度与元件的容器。

#date_container{ 
    width : <value>px; 
    }

来源

2016-05-30 09:29:04

Bootstrap输入组插件分割

回答

相关问题