Estoy empezando a usar bootstrap 4 y quiero tener un logo que a su lado tenga las opciones del menu, sin embargo me salen una debajo de la otra, alguno sabe el porque pasa eso?, les dejo un code pen con el codigo que estoy trabajando
2 respuestas
Prueba este código
<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>
Prueba sin este div <div class="col-xl-12 .bottom">
. Creo que no puede usar un div.col-xl-numero
en un otro div.col-xl-numero
sin un otro div.row
.
Personalamente, prefiero usar Semantic-UI o Skeleton a Bootstrap4.