Bootstrap – Crear un margen entre elementos de la misma columna

febrero 25, 2015

Tengo un formulario donde el usuario debe seleccionar dos valores, el mes y el año. Para ello utilicé el siguiente código con AngularJS

<div class="form-group row">

            <div class="col-md-2">
                <label>Desde</label>
                <select class="form-control" ng-model="imes" ng-options="mes.titulo for mes in meses" />
                <select class="form-control" ng-model="ianyo" ng-options="anyo for anyo in anyos" />
            </div>

            <div class="col-md-2">
                <label>Hasta</label>
                <select class="form-control" ng-model="fmes" ng-options="mes.titulo for mes in meses" />
                <select class="form-control" ng-model="fanyo" ng-options="anyo for anyo in anyos" />
            </div>
        </div>

Pero los controles del formulario quedan ‘pegados’, por ello es necesario crear un espacio entre los elementos de la misma columna. Para lograrlo creé las siguientes clases en css

.margin-bootom-xs {
    margin-bottom: 5px;
}

.margin-bootom-sm {
    margin-bottom: 10px;
}

.margin-bootom-md {
    margin-bottom: 20px;
}

.margin-bootom-lg {
    margin-bottom: 40px;
}

En esta respuesta de stackoverflow te recomiendan, si utilizas LESS, crearlas de acuerdo a la variable @line-height-computed. Como no utilicé LESS, calcule los valores de acuerdo a los valores por default de Bootstrap

Y para utilizarlos basta con agregar las clases al elemento correspondiente

<div class="form-group row">

            <div class="col-md-2">
                <label>Desde</label>
                <select class="form-control margin-bootom-sm" ng-model="imes" ng-options="mes.titulo for mes in meses" />
                <select class="form-control" ng-model="ianyo" ng-options="anyo for anyo in anyos" />
            </div>

            <div class="col-md-2">
                <label>Hasta</label>
                <select class="form-control margin-bootom-sm" ng-model="fmes" ng-options="mes.titulo for mes in meses" />
                <select class="form-control" ng-model="fanyo" ng-options="anyo for anyo in anyos" />
            </div>

            <div class="col-md-2">
                <select class="form-control" ng-model="reporte"
                        ng-options="reporte.nombre for reporte in reportes"
                        ng-change="queryOficinasReporte()">
                    <!--<option value="" disabled selected>Reporte</option>-->
                </select>
            </div>

            <div class="col-md-2">
                <select class="form-control" ng-model="formato"
                        ng-options="formato.nombre for formato in formatos">
                </select>
            </div>

        </div>

Fuentes:
http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows
http://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429
http://getbootstrap.com/customize/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: