2

Estoy haciendo un formulario y necesito que los botones queden a la altura de los <select>. Necesito que siempre estén pegado al borde de abajo del div que lo contiene Esto hará que siempre queden alineados con los <select>, esta característica tanto en versiones mobile como desktop.

.btn-bottom-right {
  position: absolute;
  right: 0;
  bottom: 20% !important;
}

.btn-bottom-left {
  position: absolute;
  left: 0;
  bottom: 20% !important;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
  <div class="col-sm-3">
    <div class="form-group">
      <label for="fs7 m-0 text-secondary">
        Razón social
        <span class="text-danger">*</span>
      </label>
      <select class="form-control form-control-sm">
        <option value="0" selected disabled>Selecciona una razón social</option>
      </select>
    </div>

  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <label for="fs7 m-0 text-secondary">
        Sucursal
        <span class="text-danger">*</span>
      </label>
      <select class="form-control form-control-sm">
        <option value="0" selected disabled>Selecciona una sucursal</option>
      </select>
    </div>

  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <label for="fs7 m-0 text-secondary">
        Departamento
        <span class="text-danger">*</span>
      </label>
      <select class="form-control form-control-sm">
        <option value="NEW_CAR">Autos nuevos</option>
      </select>
    </div>

  </div>
  <div class="col-sm-3">
    <div class="clearfix">
      <button class="btn btn-sm btn-outline-secondary btn-bottom-left">
        <i class="fas fa-search"></i> Buscar
      </button>
      <button class="btn btn-sm btn-outline-secondary btn-bottom-right">
        <i class="fas fa-eraser"></i> Limpiar
      </button>
    </div>
  </div>
</div>

Le agregué ese código de CSS. En el viewport sm de bootstrap 4 se ve bien, se empareja justo como lo necesito, pero se desbarata cuando es un móvil.

Me gustaría buscar una solución limpia con CSS, sin espacios, paddings o margins al tanteo.

0

5 respuestas 5

6
+50

Bueno deberías quitar la clase denominada clearfix ya que esta esta encaminada a:

Easily clear floats by adding .clearfix to the parent element.

Es decir (no es traducción):

Nos ayuda a que una etiqueta padre pueda contener a los hijos que tenga y estos tengan la naturaleza flotante, para que de esta manera evitemos queden por fuera de la antes mencionada.

NOTA

En la medida de lo posible deberías evitar el uso de !important, justo aquí puedes leer mas al respecto sobre su uso.

EJEMPLO

      <style>
        .container {
          background-color: red;
          border: solid 1px;
          overflow: auto;
        }
        .child {
          float: left;
          background-color: tomato;
        }
      </style>
    </head>
    <body>
    <section class="container">
      <article class="child">Uno</article>
      <article class="child">Dos</article>
    </section>

Como los hijos del div son flotantes debemos indicar que el overflow del padre sea automático y entonces sea capaz de contener a sus elementos internos.

Sin embargo al estar usando como muestras la última versión de Bootstrap esta misma incluye el uso de las funcionalidades de flexbox mediante clases como:

  • d-flex
  • justify-content-around

Entonces deberías proceder:

  • Elimina la clase clearfix
  • Agrega las propieades arriba listadas
  • Antes de que ocurra el ajuste visual por efecto del responsive aplicaremos lo siguiente
  • Anulamos el margin por defecto y con una pequeña regla CSS ajustamos la altura de los botones con respecto de los select de esta manera:

Regla css

  .d-flex { 
    margin-top: 1.9em;
  }
  • Posterior cuando la maquetación se ajusta por efecto de las media queries solo deberás revisar que clase conviene mas agregar de flexbox para ajustar el acomodo de los botones:
    • justify-content-center (Los dejaría al centro sobre el eje principal)
    • justify-content-around (para distribuir a los elementos con un espacio a los lados y entre ellos)
    • justify-content-between (para distribuir a los elementos con un espacio entre ellos)

Completo:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <style>
      .d-flex { 
        margin-top: 1.9em;
      }
    
    </style>
    <div class="row">
      <div class="col-sm-3">
        <div class="form-group">
          <label for="fs7 m-0 text-secondary">
            Razón social
            <span class="text-danger">*</span>
          </label>
          <select class="form-control form-control-sm">
            <option value="0" selected disabled>Selecciona una razón social</option>
          </select>
        </div>
    
      </div>
      <div class="col-sm-3">
        <div class="form-group">
          <label for="fs7 m-0 text-secondary">
            Sucursal
            <span class="text-danger">*</span>
          </label>
          <select class="form-control form-control-sm">
            <option value="0" selected disabled>Selecciona una sucursal</option>
          </select>
        </div>
    
      </div>
      <div class="col-sm-3">
        <div class="form-group">
          <label for="fs7 m-0 text-secondary">
            Departamento
            <span class="text-danger">*</span>
          </label>
          <select class="form-control form-control-sm">
            <option value="NEW_CAR">Autos nuevos</option>
          </select>
        </div>
    
      </div>
      <div class="col-sm-3">
        <div class="d-flex justify-content-around">
          <button class="btn btn-sm btn-outline-secondary btn-bottom-left">
            <i class="fas fa-search"></i> Buscar
          </button>
          <button class="btn btn-sm btn-outline-secondary btn-bottom-right">
            <i class="fas fa-eraser"></i> Limpiar
          </button>
        </div>
      </div>
    </div>

4

Le quité la clase clearfix al div padre de los botones "Buscar" y "Limpiar". Como estás usando bootstrap use sus clases CSS predefinidas, al div le apliqué las clases:

Nota: La clase CSS .top-40-percent es personalizada.

  • .d-flex, justify-content-between -> Para que los botones estén en cada extremo del div.
  • .position-relative, .top-40-percent -> Para poner el div en posición relativa y mover el div un 40% de la distancia del div padre.
  • w-100 -> Para que el div ocupe el 100% del espacio.

Espero haberlo explicado bien.

.top-40-percent {
    top: 40%;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="fs7 m-0 text-secondary">
                        Razón social
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control form-control-sm">
                        <option value="0" selected disabled>Selecciona una razón social</option>
                    </select>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="fs7 m-0 text-secondary">
                        Sucursal
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control form-control-sm">
                        <option value="0" selected disabled>Selecciona una sucursal</option>
                    </select>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="fs7 m-0 text-secondary">
                        Departamento
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control form-control-sm">
                        <option value="NEW_CAR">Autos nuevos</option>
                    </select>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="d-flex justify-content-between w-100 position-relative top-40-percent">
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-eraser"></i> Limpiar
                    </button>
                </div>
            </div>
        </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

0
0

te dejo este código, espero te ayude. introducir la descripción de la imagen aquí

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<main>
  <div class="container-">
    <div class="form-row justify-content-center">
      <div class="col-md-2 mb-3">
        <label for="fs7 m-0 text-secondary">
                    Razón social
                    <span class="text-danger">*</span>
                </label>
        <select class="custom-select">
          <option value="0" selected disabled>-- Seleccionar --</option>
        </select>
      </div>
      <div class="col-md-2 mb-3">
        <label for="fs7 m-0 text-secondary">
                    Sucursal
                    <span class="text-danger">*</span>
                </label>
        <select class="custom-select">
          <option value="0" selected disabled>-- Seleccionar --</option>
        </select>
      </div>
      <div class="col-md-2 mb-3">
        <label for="fs7 m-0 text-secondary">
                    Departamento
                    <span class="text-danger">*</span>
                </label>
        <select class="custom-select">
          <option value="NEW_CAR">-- Seleccionar --</option>
        </select>
      </div>
    </div>
    <div class="form-row justify-content-center">
      <div class="col-md-2 mb-3">
        <div class="clearfix">
          <button class="btn btn-sm btn-outline-secondary btn-bottom-left">
                        <i class="fas fa-search"></i> Buscar
                    </button>
          <button class="btn btn-sm btn-outline-secondary btn-bottom-right">
                        <i class="fas fa-eraser"></i> Limpiar
                    </button>
        </div>
      </div>
    </div>
  </div>
</main>

0
0

Para usar una solución de CSS, sin necesitar de bootstrap o librerías de terceros, puedes usar CSS Flexbox.

.row-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    align-content: center;
}

.centered-row {
    justify-content: center;
}

.centered-row > * {
    margin: 0px 10px 0px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./script.js" defer></script>
    <link rel="stylesheet" href="./styles.css">
    <title>Test</title>
</head>
<body>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <div class="row-container">

        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="fs7 m-0 text-secondary">
                        Razón social
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control form-control-sm">
                        <option value="0" selected disabled>Selecciona una razón social</option>
                    </select>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="fs7 m-0 text-secondary">
                        Sucursal
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control form-control-sm">
                        <option value="0" selected disabled>Selecciona una sucursal</option>
                    </select>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="fs7 m-0 text-secondary">
                        Departamento
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control form-control-sm">
                        <option value="NEW_CAR">Autos nuevos</option>
                    </select>
                </div>
            </div>
    
      </div>

      <div class="row centered-row">

        <button class="btn btn-sm btn-outline-secondary btn-bottom-left">
            <i class="fas fa-search"></i> Buscar
        </button>
        <button class="btn btn-sm btn-outline-secondary btn-bottom-right">
            <i class="fas fa-eraser"></i> Limpiar
        </button>

      </div>

    </div>
</body>
</html>

Básicamente se trata de dos clases, row-container y row.
row-container es una "lista" vertical de filas. Usa la propiedad flex con dirección column, para hacerla vertical y alinea cada contenido dentro aprovechando el máximo espacio (space-between), de este modo los buttons siempre quedan pegados abajo de todo.

row es una "lista" horizontal. Usa la propiedad flex con dirección row para hacerla horizontal y alinea el contenido usando todo el espacio repartido (space-around).

Hice una tercera clase (centered-row) para la row que contiene los botones, que básicamente, en vez de aprovechar todo el espacio, centra el contenido en el medio y pone 10px de margen entre botón y botón.

Espero que sirva.

1
  • Usando manualmente los flexbox se tiene mucho más control. Tal y como se usan en el ejemplo que puse, son 3 líneas de CSS y permite escalabilidad. Además, se pidió una solución limpia en CSS.
    – VRoxa
    el 10 abr. 2020 a las 16:45
0

ojala te ayude el codigo, saludos

.btn-bottom-right {
  position: absolute;
  right: 0;
  bottom: 20% !important;
}

.btn-bottom-left {
  position: absolute;
  left: 0;
  bottom: 20% !important;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
Selecciona una razón social
  </div>
    
  <div class="col-sm-3">
    <div class="form-group">
      
      <select class="form-control form-control-sm">
        <option value="0" selected disabled>Selecciona una sucursal</option>
      </select>
    </div>

  </div>
  <div class="col-sm-3">
    <div class="form-group">
    
      <select class="form-control form-control-sm">
        <option value="NEW_CAR">Autos nuevos</option>
      </select>
    </div>

  </div>
  <div class="col-sm-1">
    <div class="clearfix">
      <button class="btn btn-sm btn-outline-secondary btn-bottom-left">
        <i class="fas fa-search"></i> Buscar
      </button>          
    </div>
  </div>
    <div class="col-sm-1">
    <div class="clearfix">
      
      <button class="btn btn-sm btn-outline-secondary btn-bottom-right">
        <i class="fas fa-eraser"></i> Limpiar
      </button>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.