0

estoy trabajando con la alineación de elementos div en html con bootstrap, me gustaria saber si puedo aplicar una alineación (right) a un elemento div en los tamaños de pantalla sm, md, lg y xl y en el más pequeño, osea xs, aplicar una alineación a la izquierza (left). Tengo el div con la clase así:

<div class="float-sm-right float-md-right float-lg-right float-xl-right float-xs-left"> ... Contenido </div>

Me funciona así perfectamente pero tengo que especificar en todos los tamaños, la pregunta es si habrá una clase para aplicar un tamaño en todos (los mencionados) menos xs al cual como indico quiero alinearlo a la izquierda.

2
  • nop, tendrías que crearla tu
    – John
    Commented el 31 mar. 2022 a las 16:30
  • Como tal tendrías que crearlo, puedes hacer uso de @media dentro de tu script para añadir un tamaño en particular o varios tamaños para ciertos tamaños de pantalla
    – ang3les96
    Commented el 31 mar. 2022 a las 16:37

1 respuesta 1

1

Te comparto una idea fácil para implementar tu estilo. Solamente crea tu propio y único estilo .mi-float y con esto trabaja en tu propio y nuevo @media querie para el float: left.

Dijiste que en xs seria una excepción. Pero este xs no se que @media es en Bootstrap 4; porque el mínimo es de 576px (para los móviles). Como las @media en Bootstrap indican min-width: 576px, tu @media podría ser de max-width: 575px, de la siguiente manera:

@media (max-width: 575px) {
    .mi-float {
        float: left !important
    }
}

(No debe ser 576px, porque esto es el mínimo de Bootstrap 4, y hará conflicto. Debe ser 575px)!

Ésta @media funcionara menor a 576px (el mínimo de Bootstrap 4). Solamente en ésta @media declara tu estilo float: left.

Los demás, float: right, no declares dentro de ningún @media (porque Bootstrap 4 ya tiene definido).

Por su puesto, en tu HTML sería simplemente mi-float:

<div class="float-sm-right float-md-right float-lg-right float-xl-right float-xs-left mi-float"> ... Contenido </div>

A continuación, por si necesitas, agrego los @media de Bootstrap 4 que encontré:

@media (min-width: 576px) {
    .float-sm-right {
        float: right !important
    }
}

@media (min-width: 768px) {
    .float-md-right {
        float: right !important
    }
}

@media (min-width: 992px) {
    .float-lg-right {
        float: right !important
    }
}

@media (min-width: 1200px) {
    .float-xl-right {
        float: right !important
    }
}
5
  • Amigo Muchas gracias por tu gran ayuda, me será de gran utilidad.
    – Andy White
    Commented el 31 mar. 2022 a las 18:07
  • Ok. Solamente falta que marques como respuesta aceptada. Para que la respuesta sirva a otros. Commented el 31 mar. 2022 a las 18:17
  • jejejej listo lo acabo de hacer, soy nuevo en stackoverflow y no lo sabía.
    – Andy White
    Commented el 31 mar. 2022 a las 18:22
  • Bien gracias. Eso es para saber que tu pregunta ya tubo una respuesta solucionada. Y servirá para otros que busquen la misma solución. Commented el 31 mar. 2022 a las 18:32
  • Cualquier duda o problemas que tenga con algún código, simplemente realiza una nueva pregunta. Commented el 31 mar. 2022 a las 18:33

Tu Respuesta

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

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