¿Cómo mover H2 Debajo de H1 usando solo la propiedad flotante?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *