Alinear horizontalmente en lados opuestos botones con bootstrap

publicado por: Anonymous

Tengo un formulario en que se pueden realizar tres acciones: Ingresar empleado, cancelar y Guardar.

Utilizo bootstrap para crear el formulario y los botones tal como muestro en la imagen

introducir la descripción de la imagen aquí

El problema es que quisiera los tres botones alineados horizontalmente al mismo nivel (no como se muestra en la figura en la que el botón ingresar empleado esta mas arriba) y siempre dejar el botón de ingresar empleado en el lado izquierdo y los dos botones restantes en el lado derecho y que al mostrarlos en una resolución menor queden los tres alineados verticalmente uno bajo el otro…pero no puedo conseguirlo.

Este es el código de los botones utilizo MVC ASP.NET con motor de vistas razor

// Boton Ingresar Empleado
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-4">
                            <div class="col-md-10">
                                <input type="submit" value="Ingresar Empleado" class="btn btn-primary" id="sentInfo" />
                            </div>
                    </div>
                  </div>

                // Boton Cerrar y Guardar Formulario
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-7">
                        <button type="button" onclick="location.href='@Url.Action("TipoEvento", "Home")'" class="btn btn-danger" id="btn-cancelar">
                            Cancelar
                            <span class="glyphicon glyphicon-remove-sign"></span>
                        </button>

                        <button type="submit" value="Guardar" class="btn btn-primary">
                            Guardar
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </button>
                    </div>
                </div>

y el formulario lo defino así:

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-2">

solución

El primer problema que veo es que Bootstrap te proporciona 12 columnas y para el primer botón estás usando 14 (4 del offset y 10 para el elemento), lo que hace que se “sature” y no dejas que el resto de elementos se distribuyan horizontalmente.

Segundo: Bootstrap sigue la filosofía mobile-first, por lo que un consejo es que el tamaño mínimo para los elementos lo debes definir con col-xs-* para asegurarte que se verá siempre igual, y desde ahí escalas hacia arriba (col-sm-*, col-md-* y col-lg-*).

Tercero: Bootstrap ya tiene una manera de mandar el contenido a la derecha: .pull-right, solo con el inconveniente de que debes asegurarte que haya algo más dentro de donde lo vayas a contener. Si no hay nada, debes poner por lo menos un &nbsp; para que respete el espacio, ya que si no lo haces todo lo que tengas por debajo se correrá un poco hacia arriba.

<div class="row">
    <div class="col-xs-12">
        // Boton Ingresar Empleado
        <div class="col-xs-6">
            <div class="form-group">
                <input type="submit" value="Ingresar Empleado" class="btn btn-primary" id="sentInfo" />
            </div>
        </div>
        // Boton Cerrar y Guardar Formulario
        <div class="col-xs-6">
            <div class="form-group">
                &nbsp;
                <div class="pull-right">
                    <button type="button" onclick="location.href='@Url.Action("TipoEvento", "Home")'" class="btn btn-danger" id="btn-cancelar">
                        Cancelar <span class="glyphicon glyphicon-remove-sign"></span>
                    </button>
                    <button type="submit" value="Guardar" class="btn btn-primary">
                        Guardar <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *