Why does my example not match the Bootstrap documentation

Asked

Viewed 52 times

-1

I’m trying to learn Scrollspy in Bootstrap, but I’m having trouble copying the same code from the documentation but I didn’t get the same result as the scrollbar, which I missed.

<!doctype html>
<html lang="pt-br">

<head>
  <title>Finans</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="estilo.css">
</head>

<body>
  <nav id="navbar-exemplo2" class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#fat">@fat</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#mdo">@mdo</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#um">um</a>
          <a class="dropdown-item" href="#dois">dois</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#tres">tres</a>
        </div>
      </li>
    </ul>
  </nav>
  <div data-spy="scroll" data-target="#navbar-exemplo2" data-offset="0">
    <h4 id="fat">@fat</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="mdo">@mdo</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="um">um</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="dois">dois</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="tres">tres</h4>

  </div>



  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>

</body>

</html>

html

1 answer

3


It doesn’t work because you didn’t put a class that references the properties of the div, which, according to the documentation, when it is not the body, should have:

  • position: relative
  • overflow: auto or overflow-y: scroll
  • and especially a height height definite

The functional example class in the documentation is .scrollspy-example, but in the example code shown, they forgot to put the class. But analyzing in the element inspector, it is used. See:

inserir a descrição da imagem aqui

See working:

.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<nav id="navbar-exemplo2" class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#fat">@fat</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#mdo">@mdo</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#um">um</a>
          <a class="dropdown-item" href="#dois">dois</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#tres">tres</a>
        </div>
      </li>
    </ul>
  </nav>
  <div data-spy="scroll" data-target="#navbar-exemplo2" data-offset="0" class="scrollspy-example">
    <h4 id="fat">@fat</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="mdo">@mdo</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="um">um</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="dois">dois</h4>
    <p>
      É um fato estabelecido há muito tempo que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo
      aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração
    </p>
    <h4 id="tres">tres</h4>

  </div>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.