Las clases .pull-left y .pull-right se reemplazaron con las clases .float-left y .float-right en Bootstrap 4. Estas clases de utilidad se usan para hacer flotar un elemento hacia la izquierda o hacia la derecha en los distintos tamaños de ventana gráfica según en la cuadrícula Bootstrap. Funciona usando la propiedad flotante de CSS.
Uso de las clases .pull-left y .pull-right
Estas clases ayudan a hacer flotar los elementos:
- La clase .pull-left se usa para hacer flotar el elemento hacia la izquierda.
- La clase .pull-right se usa para hacer flotar el elemento a la derecha.
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Bootstrap Floating utility class</title> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 style="color:green"> GeeksforGeeks </h1> <b>Bootstrap Floating utility class</b> <br> <div class="pull-left"> This div floats to the left. </div> <br> <div class="pull-right"> This div floats to the right. </div> <br> </div> </body> </html>
Producción:
Clases base
Hay tres clases que ayudan a hacer flotar los elementos:
- La clase .float-left se usa para hacer flotar el elemento hacia la izquierda.
- La clase .float-right se usa para hacer flotar el elemento a la derecha.
- La clase .float-none se usa para deshabilitar la flotación.
Estas clases funcionarán en todos los tamaños de ventana gráfica a menos que se especifique usando sus versiones receptivas.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> Bootstrap 4 Floating utility class </title> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 style="color:green"> GeeksforGeeks </h1> <b>Bootstrap 4 Floating utility class</b> <br> <div class="float-left"> This div floats to the left. </div> <br> <div class="float-right"> This div floats to the right. </div> <br> <div class="float-none"> This div does not float. </div> </div> </body> </html>
Producción:
Flotación receptiva basada en tamaños de ventana gráfica
Las variaciones receptivas de las clases base se pueden usar para aplicar la flotación solo en tamaños de ventana gráfica específicos. Hay cuatro variaciones de tamaño de ventana gráfica disponibles para su uso.
- sm: Este es el pequeño punto de interrupción. Todas las clases que usen esto flotarán en ventanas de tamaño pequeño o más ancho.
- md: este es el punto de interrupción medio . Todas las clases que usen esto flotarán en ventanas de tamaño mediano o más ancho.
- lg: Este es el gran punto de interrupción. Todas las clases que usen esto flotarán en ventanas de tamaño grande o más anchas.
- xl: este es el punto de interrupción extra grande . Todas las clases que usen esto flotarán en ventanas de visualización de tamaño extra grande o más ancho.
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Responsive variations with float</title> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <b>Responsive variations with float</b> <br> <div class="float-sm-left"> This div floats to the left on small or wider viewports. </div> <br> <div class="float-sm-right"> This div floats to the right on small or wider viewports. </div> <br> <div class="float-sm-none"> This div does not float on small or wider viewports. </div> <div class="float-md-left"> This div floats to the left on medium or wider viewports. </div> <br> <div class="float-md-right"> This div floats to the right on medium or wider viewports. </div> <br> <div class="float-md-none"> This div does not float on medium or wider viewports. </div> <div class="float-lg-left"> This div floats to the left on large or wider viewports. </div> <br> <div class="float-lg-right"> This div floats to the right on large or wider viewports. </div> <br> <div class="float-lg-none"> This div does not float on large or wider viewports. </div> <div class="float-xl-left"> This div floats to the left on extra large or wider viewports. </div> <br> <div class="float-xl-right"> This div floats to the right on extra large or wider viewports. </div> <br> <div class="float-xl-none"> This div does not float on extra large or wider viewports. </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA