Descripción:
- En Bootstrap 4, la etiqueta H2 se puede agregar debajo o debajo de la etiqueta H1. Mientras que en el caso de usar float, la etiqueta H2 no se puede agregar debajo o debajo de la etiqueta H1 porque la etiqueta H2 se moverá debajo del final de la etiqueta H1 debido a las propiedades CSS de Bootstrap 4.
- Para erradicar este problema, podemos mover H2 debajo de H1 en el flotador envolviendo ambas etiquetas con un elemento que tenga propiedades flexibles o envolviendo individualmente cada etiqueta con un elemento que tenga clase clearfix.
Ejemplo 1: Los siguientes ejemplos ilustran cómo mover H2 debajo de H1 solo con flotadores.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.4.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> </head> <body> <div class="container-fluid p-5"> <h1 class="text-success font-weight-bold text-center"> GeeksforGeeks</h1> <span class="font-weight-bolder"> H1 & H2 Without float </span> <div class="border bg-primary text-white"> <h1 class="">H1 Without Float left</h1> <h2 class="">H2 Without Float left</h2> </div> <span class="font-weight-bolder">With float</span> <div class="border bg-danger clearfix text-white"> <h1 class="float-left ">H1 Float left</h1> <br> <h2 class="float-left ">H2 Float left</h2> </div> <span class="font-weight-bolder"> Using clearfix with float </span> <div class="border bg-success text-white"> <span class="clearfix"> <h1 class="float-left">H1 Float left</h1> </span> <span class="clearfix"> <h2 class="float-left">H2 Float left</h2> </span> </div> <span class="font-weight-bolder"> Wrapped by flex with float </span> <div class="border bg-success text-white d-flex flex-column"> <h1 class="float-left ">H1 Float left</h1> <br> <h2 class="float-left ">H2 Float left</h2> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA