Problem with the bootstrap grid 4

Navigation
1

I'm starting to use bootstrap 4 and I want to have a logo that has the menu options next to it, however I get one below the other, does anyone know why that happens ?, I leave a code pen with the code I'm working

link

    
asked by Maria 26.10.2018 в 23:05
source

2 answers

1

Try this code 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<header>
  <div class="container-fluid">
    <div class="row">

      <div class="col-2">
        <img src="http://127.0.0.1/Jerwi/wp-content/uploads/2018/10/logojerwi.png" class="img">
      </div>
      <div class="col-8">
        <ul class="nav navbar-nav navbar-right">
          <li>Inicio</li>
          <li>Inicio</li>
          <li>Inicio</li>
          <li>Inicio</li>
        </ul>
      </div>
    </div>

  </div>
</header>
<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>
    
answered by 27.10.2018 / 00:59
source
1

Try without this div <div class="col-xl-12 .bottom"> . I think you can not use div.col-xl-numero in another div.col-xl-numero without another div.row .

Personally, I prefer to use Semantic-UI or Skeleton a Bootstrap4.

    
answered by 26.10.2018 в 23:38
Why does a line of text about the functions in Visual Studio Code come up? Create table in JQuery HTML