Nav-Bar placing items inside the button

Navigation
0

I started studying Bootstrap and I'm following a step by step w3c , nav-bar items are entering the button, this is expected when the page is resized, but the problem is that it is not resized and the items are entering inside the button. The code is the same as the page and just does not work ..

Code: 

<nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
        <a class="navbar-brand" href="#">Me</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar"></div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">QUEM</a></li>
          <li><a href="#">O QUE</a></li>
          <li><a href="#">ONDE</a></li>
        </ul>
      </div>
    </div>
  </nav>

CDN links: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
// esse é um onde só tem cores, os códigos também sairam da página da W3CD
<link rel="stylesheet" href="styles.css">

<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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
    
asked by anonymous 12.08.2018 / 02:54

1 answer

2

Face is working normal. Right away there in your code I could already see that you closed the% collapse navbar-collapse . And another problem is that you are following a tutorial that is of the 3.3.7 version and you are using the 4.1.3 version, there are differences between the versions. If you have to learn the latest version, look for a tutorial with that version, otherwise it can cause problems. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">WHO</a></li>
        <li><a href="#">WHAT</a></li>
        <li><a href="#">WHERE</a></li>
      </ul>
    </div>
  </div>
</nav>
    
12.08.2018 / 04:05
Get contents source code in Javascript How do I save an array on separate lines in DB [duplicate]