What could I do in boostrap so that in the following example all the boxes are horizontally aligned in screens of resolution higher than 1024? I can not get the last group of buttons to keep up with the rest of the boxes due to the labels you have. Thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>prueba de alineacion </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
<link rel="stylesheet" href="xcss/datapicker.css">
<script>
$(document).ready(function () {
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '< Mes anterior',
nextText: 'Mes Siguiente >',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mie','Juv','Vie','Sab'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
showOtherMonths: true,
selectOtherMonths: true,
//showOn: "button",
//Lo comentado es porque se utiliza CSS para poder el icono
//buttonImage: "img/calendar.gif",
//buttonImageOnly: true,
buttonImage: "",
buttonImageOnly: false,
buttonText: ""
};
$.datepicker.setDefaults($.datepicker.regional["es"]);
// Por defecto se muestra un dia con LIMITE_POR_DEFECTO
$("#dpFechaMinima").datepicker({
onSelect: function(fecha) {
console.log("Selected Minima date: " + fecha + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
var fecha = $("#dpFechaMinima").datepicker("getDate");
console.log("Cambio en fecha minima que provoca cambio en fecha maxima a " + fecha);
if( !fecha){
limitePorDefecto();
} else {
fecha.setDate(fecha.getDate() + 30);
$("#dpFechaMaxima").val(fmtFecha4(fecha));
}
}).mask('99/99/9999');
// Maxima fecha del limite máximo es la fecha actual
$("#dpFechaMaxima").datepicker({
onSelect: function(fecha) {
console.log("Selected Maxima date: " + fecha + ", Current Selected Value= " + this.value);
$(this).change();
},
maxDate: new Date()
}).on("change", function() {
console.log("Change event");
}).mask('99/99/9999');
});
</script>
</head>
<body>
<div id="contenedorSeleccion" class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="control-group col-md-2">
<label for="dpFechaMinima" class="control-label">DESDE FECHA</label>
<div class="controls">
<div class="input-group">
<label for="dpFechaMinima" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="dpFechaMinima" type="text" class="date-picker form-control" placeholder="dd/mm/aaaa" maxlength="10" size="10px" />
</div>
</div>
</div>
<div class="control-group col-md-2">
<label for="dpFechaMaxima" class="control-label">HASTA FECHA</label>
<div class="controls">
<div class="input-group">
<label for="dpFechaMaxima" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="dpFechaMaxima" type="text" class="date-picker form-control" placeholder="dd/mm/aaaa" maxlength="10" size="10px" />
</div>
</div>
</div>
<div class="control-group col-md-2">
<div class="form-group">
<label for="idEvento">TIPO DE EVENTO</label>
<select class="form-control" id="idEvento" name="idEvento">
<option value="" selected="selected">Cualquiera</option>
<option value=1>LogON</option>;
<option value=2>LogOUT</option>;
</select>
</div>
</div>
<div class="control-group col-md-2">
<div class="form-group">
<label for="idUsuario">USUARIOS</label>
<select class="form-control" id="idUsuario" name="idUsuario">
<option value="" selected="selected">Cualquiera</option>
<option value=1>Pepe</option>;
<option value=2>Juan</option>;
<option value=2>Maria</option>;
</select>
</div>
</div>
<div class="btn-group col-md-4">
<button class="btn btn-default" type="button" title="Refrescar">
<span class="icon glyphicon glyphicon-refresh"></span>
</button>
<div class="dropdown btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="dropdown-text">10</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li class="active" aria-selected="true">
<a data-action="10" class="dropdown-item dropdown-item-button">10</a>
</li>
<li aria-selected="false">
<a data-action="25" class="dropdown-item dropdown-item-button">25</a>
</li>
<li aria-selected="false">
<a data-action="50" class="dropdown-item dropdown-item-button">50</a>
</li>
<li aria-selected="false">
<a data-action="-1" class="dropdown-item dropdown-item-button">All</a>
</li>
</ul>
</div>
<div class="dropdown btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="dropdown-text">
<span class="icon glyphicon glyphicon-th-list"></span>
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li><label class="dropdown-item"><input name="id" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> ID</label></li>
<li><label class="dropdown-item"><input name="loginUsuario" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Login</label></li>
<li><label class="dropdown-item"><input name="nombreUsuario" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Nombre usuario</label></li>
<li><label class="dropdown-item"><input name="fechaEvento" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Fecha Evento</label></li><li><label class="dropdown-item"><input name="descEvento" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Descripción Evento</label></li>
<li><label class="dropdown-item"><input name="detalles" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Detalles</label></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>