2

Saludos tengo el siguiente caso

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <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.0/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>

<!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #a0ecfc;">
      <div class="container">
        <a title="Cargar Inicio" class="navbar-brand" href="index.php">
          
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

         <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a title="Cargar Inicio" class="nav-link" href="index.php"><i class="fas fa-home fa-fw"></i> Inicio
                <span class="sr-only">(current)</span>
              </a>
            </li>


    </nav>

    <div class="container">
    
    <div class="col-8">
<h2>Contenido</h2>
<div class="list-group mb-5">
<a href="#L1" class="list-group-item list-group-item-action">Introducción</a>
<a href="#L2" class="list-group-item list-group-item-action">Condiciones de uso</a>
<a href="#L3" class="list-group-item list-group-item-action">Modificaciones</a>
<a href="#L4" class="list-group-item list-group-item-action">Obligaciones del Usuario</a>
<a href="#L5" class="list-group-item list-group-item-action">Sobre Bloqueos de Usuarios</a>
<a href="#L6" class="list-group-item list-group-item-action">Responsabilidad del Portal Web</a>
<a href="#L7" class="list-group-item list-group-item-action">Propiedad intelectual e industrial</a>
<a href="#L8" class="list-group-item list-group-item-action">Legislación aplicable, jurisdicción competente y notificaciones</a>
</div>
</div>

<div class="my-5" id="L1"><b>1. Introducción</b></div>
<div class="mb-5" style="text-align: justify; ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

<div class="my-5" id="L2"><b>2. Condiciones de uso</b></div><ul class="mb-5"><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</li></ul>

<div class="my-5" id="L3"><b>3. Modificaciones</b></div><ul class="mb-5"><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</li></ul>

<div class="my-5" id="L4"><b>4. Obligaciones del Usuario</b></div><ul class="mb-5"><li style="text-align: justify; ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</li></ul>

<div class="my-5" id="L5"><b>5. Sobre Bloqueos de Usuarios</b></div><ul class="mb-5"><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

<div class="my-5" id="L6"><b>6. Responsabilidad del Portal Web</b></div><ul class="mb-5"><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

<div class="my-5" id="L7"><b>7. Propiedad intelectual e industrial</b></div><ul class="mb-5"><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

<div class="my-5" id="L8"><b>8. Legislación aplicable, jurisdicción competente y notificaciones</b></div><ul class="mb-5"><li style="text-align: justify; ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

    </div>

</body>
</html>

en principio funciona pero seria ideal que al dar click en alguno de los link del contenido dicho titulo se vea al mostrar su contenido y no que quede tapado con el <nav>

Vale acotar que ya revise la documentacion pero no comprendo como hacerlo, he intentado con mt-5 tambien con mp-5 y nada.

1 respuesta 1

2

Pudieras valerte de la propiedad padding y en específico de padding-top para afectar el espacio generado en la parte superior de tu etiqueta, pudiendo hacer lo siguiente

<style>
   .my-5{
      padding-top: 60px;
   }
</style>

Si revisas uso la clase .my-5 por que es la que a través de un div envuelve a cada título

Gracias a la observación de otro usuario te comento que de acuerdo a la documentación de bootstrap tienes otra opción para lograr lo que buscas

A cada div agrégale esta clase quitando el CSS de la primer opción que te di quedando así

<div class="my-5 pt-5" id="L8">tu texto....</div>
2
  • 1
    Hola Aprendiz, recuerda que ya existe una clase para especificar la propiedad padding-top en BS4 y se llama .pt-* donde * puede ser un número entre 0 a 5. La clase .my-5, en cambio especifica los valores de margin en el eje Y (top y bottom) y no debería modificarse. Puedes ver las utilidades de espacio en Bootstrap 4 aquí Commented el 10 may. 2019 a las 12:53
  • 1
    Exactamente, el número 5 especifica un valor de 3rem, que, dependiendo del tamaño de fuente que por defecto es 16px te daría una conversión de 48px Commented el 10 may. 2019 a las 13:20

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.