0

Dado que el nuevo sistema de BS4 hace que las columnas de un row tengan el mismo tamaño, estoy buscando que mi div.footer siempre quede al final, al ser elementos estáticos deberían tener un poco de simetría independiente de cuanto mida el div padre

 <div class="footer">
      <div class="clearfix">
        <button class="btn btn-info btn-sm float-left">Kardex</button>
        <button class="btn btn-primary btn-sm float-right">Perfil</button>
      </div>
      <div class="text-center fs15">
        <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
        <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
      </div>
    </div>

Siempre debe estar pegado el final del div padre para que todos se vean iguales, reitero, sin importar el contenido que esté arriba de ellos y el tamaño del contenedor.

.footer {
  position: relative;
  bottom: 0;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row no-gutters">
  <div class="shadow p-3 mt-2 border border-gray bg light col-6 col-md-4 col-lg-3">
    <h6 class="text-center">Alberto Siurob</h6>
    <p class="fs08 no-margin">Adeudo <span class="text-success  font-weight-bold">$ 0</span></p>
    <p class="fs08 no-margin">Producto(s)</p>
    <ul class="fs07 list-unstyled">
      <li class="text-info ml-2">Lentes solares Ban Ray</li>
      <li class="text-info ml-2">Última generación AYM</li>
    </ul>
    <div class="clearfix">
      <span class="fs05 float-right">Miembro desde<br><b>12 Abril 17</b></span>
      <span class="fs05 float-left">Modificado por<br><b>Administrador</b></span>
    </div>
    <hr>
    <div class="footer">
      <div class="clearfix">
        <button class="btn btn-info btn-sm float-left">Kardex</button>
        <button class="btn btn-primary btn-sm float-right">Perfil</button>
      </div>
      <div class="text-center fs15">
        <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
        <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
      </div>
    </div>
  </div>
  <div class="shadow p-3 mt-2 border border-gray bg light col-6 col-md-4 col-lg-3">
    <h6 class="text-center">Alberto Siurob</h6>
    <p class="fs08 no-margin">Adeudo <span class="text-danger font-weight-bold">$ 1,342</span></p>
    <p class="fs08 no-margin">Producto(s)</p>
    <ul class="fs07 list-unstyled">
      <li class="text-info ml-2">Deluxe AYM</li>
    </ul>
    <div class="clearfix">
      <span class="fs05 float-right">Miembro desde<br><b>10 Abril 19</b></span>
      <span class="fs05 float-left">Modificado por<br><b>Administrador</b></span>
    </div>
    <hr>
    <div class="footer">
      <div class="clearfix">
        <button class="btn btn-info btn-sm float-left">Kardex</button>
        <button class="btn btn-primary btn-sm float-right">Perfil</button>
      </div>
      <div class="text-center fs15">
        <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
        <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
      </div>
    </div>
  </div>
  <div class="shadow p-3 mt-2 border border-gray bg light col-6 col-md-4 col-lg-3">
    <h6 class="text-center">Alberto Siurob</h6>
    <p class="fs08 no-margin">Adeudo <span class="text-danger font-weight-bold">$ 212</span></p>
    <p class="fs08 no-margin">Producto(s)</p>
    <ul class="fs07 list-unstyled">
      <li class="text-info ml-2">Lentes solares Ban Ray</li>
      <li class="text-info ml-2">Última generación AYM</li>
      <li class="text-info ml-2">Deluxe AYM graduados</li>
    </ul>
    <div class="clearfix">
      <span class="fs05 float-right">Miembro desde<br><b>1 Mayo 18</b></span>
    </div>
    <hr>
    <div class="footer">
      <div class="clearfix">
        <button class="btn btn-info btn-sm float-left">Kardex</button>
        <button class="btn btn-primary btn-sm float-right">Perfil</button>
      </div>
      <div class="text-center fs15">
        <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
        <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
      </div>
    </div>
  </div>
  <div class="shadow p-3 mt-2 border border-gray bg light col-6 col-md-4 col-lg-3">
    <h6 class="text-center">Alberto Siurob</h6>
    <p class="fs08 no-margin">Adeudo <span class="text-success  font-weight-bold">$ 0</span></p>
    <p class="fs08 no-margin">Producto(s)</p>
    <ul class="fs07 list-unstyled">
      <li class="text-info ml-2">Lentes solares Ban Ray</li>
      <li class="text-info ml-2">Última generación AYM</li>
    </ul>
    <div class="clearfix">
      <span class="fs05 float-right">Miembro desde<br><b>12 Abril 17</b></span>
      <span class="fs05 float-left">Modificado por<br><b>Administrador</b></span>
    </div>
    <hr>
    <div class="footer">
      <div class="clearfix">
        <button class="btn btn-info btn-sm float-left">Kardex</button>
        <button class="btn btn-primary btn-sm float-right">Perfil</button>
      </div>
      <div class="text-center fs15">
        <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
        <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
      </div>
    </div>
  </div>
</div>

0

1 respuesta 1

1

Aqui estoy usando unicamente clases que provee Bootstrap 4, evitando usar floats por completo ya que a veces pueden causar comportamientos no deseados;

Basicamente se hace que cada col-* sea tambien un flex-container con la clase d-flex y cambiamos la direccion del contendor para que se alinie todo en una columna en vez de una fila con flex-column esto en escencia gira el contenedor y lo coloca de manera vertical; para evitar las clases float-left y float-right, simplemente utilizo justify-content-between, que hace que los elementos del contenedor se alinien a los bordes;

Finalmente especifico que la caja especificamente del contenido (cree un nuevo div para esto que encapsula las listas y demas contenido aparte del footer) para que siempre utilice todo el espacio sobrante de modo que se mantenga alineado con la columna mas alta de la fila, usando flex-grow-1.

De este modo, el footer siempre sera empujado hasta abajo sin necesitar de posicion relativa o absoluta; ya que el contenedor de arriba se encarga de expandirse para ocupar todo el espacio libre

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3 shadow p-3 border border-gray bg light d-flex flex-column align-items-between">
      <div class="flex-grow-1">
        <h6 class="text-center">Alberto Siurob</h6>
        <p class="fs08 no-margin">Adeudo <span class="text-success  font-weight-bold">$ 0</span></p>
        <p class="fs08 no-margin">Producto(s)</p>
        <ul class="fs07 list-unstyled">
          <li class="text-info ml-2">Lentes solares Ban Ray</li>
          <li class="text-info ml-2">Última generación AYM</li>
        </ul>
      </div>
      <div class="d-flex justify-content-between">
        <span class="fs05">Modificado por<br><b>Administrador</b></span>
        <span class="fs05">Miembro desde<br><b>12 Abril 17</b></span>
      </div>
      <div class="footer mt-2 border-top pt-3">
        <div class="d-flex justify-content-between">
          <button class="btn btn-info btn-sm">Kardex</button>
          <button class="btn btn-primary btn-sm">Perfil</button>
        </div>
        <div class="text-center fs15">
          <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
          <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 shadow p-3 border border-gray bg light d-flex flex-column align-items-strecth">
      <div class="flex-grow-1">
        <h6 class="text-center">Alberto Siurob</h6>
        <p class="fs08 no-margin">Adeudo <span class="text-success  font-weight-bold">$ 0</span></p>
        <p class="fs08 no-margin">Producto(s)</p>
        <ul class="fs07 list-unstyled">
          <li class="text-info ml-2">Lentes solares Ban Ray</li>
        </ul>
      </div>
      <div class="d-flex justify-content-between">
        <span class="fs05">Modificado por<br><b>Administrador</b></span>
        <span class="fs05">Miembro desde<br><b>12 Abril 17</b></span>
      </div>
      <div class="footer mt-2 border-top pt-3">
        <div class="d-flex justify-content-between">
          <button class="btn btn-info btn-sm">Kardex</button>
          <button class="btn btn-primary btn-sm">Perfil</button>
        </div>
        <div class="text-center fs15">
          <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
          <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 shadow p-3 border border-gray bg light d-flex flex-column align-items-strecth">
      <div class="flex-grow-1">
        <h6 class="text-center">Alberto Siurob</h6>
        <p class="fs08 no-margin">Adeudo <span class="text-success  font-weight-bold">$ 0</span></p>
        <p class="fs08 no-margin">Producto(s)</p>
        <ul class="fs07 list-unstyled">
          <li class="text-info ml-2">Lentes solares Ban Ray</li>
          <li class="text-info ml-2">Última generación AYM</li>
          <li class="text-info ml-2">Última generación AYM</li>
          <li class="text-info ml-2">Última generación AYM</li>
        </ul>
      </div>
      <div class="d-flex justify-content-between">
        <span class="fs05">Modificado por<br><b>Administrador</b></span>
        <span class="fs05">Miembro desde<br><b>12 Abril 17</b></span>
      </div>
      <div class="footer mt-2 border-top pt-3">
        <div class="d-flex justify-content-between">
          <button class="btn btn-info btn-sm">Kardex</button>
          <button class="btn btn-primary btn-sm">Perfil</button>
        </div>
        <div class="text-center fs15">
          <a class="text-muted"><i class="fas fa-mobile-alt"></i></a>
          <a class="text-muted ml-2"><i class="fas fa-envelope"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>

1
  • 1
    Muchas gracias sensei. el 10 abr. 2019 a las 19:13

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.