Estoy trabajando con la versión Bootstrap v3.3.1 Tengo un problema de responsividad, ya que al utilizar las clases "col-sm" y "col-xs" para distintas proporciones en el modo rejilla, ya que al actuar estas clases, los controles contenidos en el div con estas clases, pierden la interacción con el usuario, por ejemplo, los botones no se pueden clickear al entrar en operación dichas clases con resoluciones bajas.
En el div que está inmediatamente después de los que contienen la clase "row" si cargo las propiedades col-xs o col-sm, me deshabilita los datetimepicker contenidos en tales contenedores.
He probado cargando las clases col-xs o col-sm en todos y cada uno de los div anidados, sin embargo no despliega el calendario.
<div>
<div class="col-md-1 col-xs-12 text-left">
<label for="inputClave" class="label-std">Opciones de Búsqueda:</label>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-3 col-xs-10">
<select class="form-control form-list input-sm" id="selectBAlmacen" name="selectBAlmacen" size="1" ng-model="almacen" ng-change="callProveedores()">
<option value="" selected>Seleccione un Almacén</option>
<%
foreach (Array oRol in DCS.Data.Dao.AbaDis.cAlmacen.listSimple())
{%><option value="<%=oRol.GetValue(0).ToString() %>" ><%=oRol.GetValue(1).ToString() %></option><%}%>
</select>
</div>
<div class="col-md-6 col-xs-10">
<select id="selectBProveedor" name="selectBProveedor" class="form-control form-list input-sm" ng-model="Proveedor" ng-options="tipo as tipo.razonSocial for tipo in lProveedores track by tipo.PKProveedor">
<option value="">Todos los Proveedores</option>
<option value="{{tipo.PKProveedor}}"></option>
</select>
</div>
<div class="col-md-3 col-xs-8">
<select class="form-control form-list input-sm" id="selectBEstado" name="selectBEstado" size="1">
<option value="ENVIADO|PROCESO" selected>Pendientes</option>
<option value="ENVIADO">Pendientes de Recibir</option>
<option value="PROCESO">En proceso de Recepción</option>
<option value="TERMINADO" >Recibidas</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class='input-group date col-md-12 col-xs-6' id='fechaBDesde' style="">
<input id="inputBFDesde" name="inputBFDesde" type='text' class="form-control input-sm" data-date-format="DD/MM/YYYY" value="<%=DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy") %>" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {$('#fechaBDesde').datetimepicker({});});
</script>
</div>
<div class="col-md-4">
<div class='input-group date col-md-12 col-xs-6' id='fechaBHasta' style="">
<input id="inputBFHasta" name="inputBFHasta" type='text' class="form-control input-sm" data-date-format="DD/MM/YYYY" value="<%=DateTime.Now.AddDays(15).ToString("dd/MM/yyyy") %>" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {$('#fechaBHasta').datetimepicker({});});
</script>
</div>
<div class="col-md-4 col-xs-8">
<input id="inputBIDOC" name="inputBIDOC" type="text" class="form-control form-input input-sm" placeholder="Orden de Compra" maxlength ="20" />
</div>
</div>
</div>
<div class="col-md-1 text-right">
<button class="btn btn-sm btn-success" role="button" type="button" aria-expanded="false" ng-click="callBuscar('')" title="Buscar clientes segun los criterios" >
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Buscar
</button>
</div>
</div>
col-*
deberían ir en los botones y no en los contenedores? No encuentro un motivo para hacerlo ni creo que tenga alguna función.