<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Victor - Design Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<nav id="menu" class="pull-right">
<li>victor</li>
<li>victor</li>
<li>victor</li>
<li>victor</li>
<li>victor</li>
<li>victor</li>
</nav>
</div>
</div>
<img>
</header>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
body{
display: block; margin: 0; padding: 0;
}
header{
width: 100%;
height: 150px;
background-color: #22313F;
}
header .container{
position: relative;
}
#menu{
display: inline-block;
}
-
pelo que parece o menu ta pegando 100% da div pai, defina um tamanho pra ela com cols, talvez resolva– Lucas Camargo8/01/2018 às 13:22
-
Alice coloque o HTML inteiro, e se possível coloque também o CSS do Estilo.CSS, assim fica mais fácil para te dar uma resposta precisa.– hugocsl8/01/2018 às 13:27
-
@hugocsl coloquei o css– Alice Vitor Rodrigues8/01/2018 às 13:29
-
@LucasHenrique coloquei cols não deu tambem– Alice Vitor Rodrigues8/01/2018 às 13:33
-
Eu copiei seu código e colei aqui, e aqui o menu está para a direita sim– Maria8/01/2018 às 13:37
1 Resposta
Para a Classe pull-right funcionar, ela precisa seguir uma hierarquia de Classes dentro do Padrão Bootstrap. Isso é quando uma Classe Filha só funciona dentro de uma Classe Pai, resumindo, para a classe funcionar ela depende de outra classe no elemento Pai.
A forma como você montou o NavBar tem vários "erros" de acordo com a documentação do Bootstrap3. Vi que você tentou não usar os estilos do CSS padrão, mas para isso o correto seria fazer um outro CSS, ou usar o próprio css/estilo.css
para sobre-escrever essas classes originais do BS3
Aqui tem um exemplo da NavBar funcionando com o pull-right
No Bootstrap 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Victor - Design Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
No Bootstrap 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name=
content=
>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body{
display: block; margin: 0; padding: 0;
}
header{
width: 100%;
height: 150px;
background-color: #22313F;
}
header .container{
position: relative;
}
#menu{
display: inline-block;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Entre o Bootstrap 3 e 4 existem diversas mudanças, e usar as classes de um dentro do outro vai dar vários problemas. Aqui tem uma lista de algumas mudanças.
https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm
Aqui está a Documentação ofician da NavBar do Bootstrap 4: https://v4-alpha.getbootstrap.com/components/navbar/
Aqui tem vário modelos de NavBar do BootStrap3 para estudar: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Documentação Oficial da NavBar do Bootstrap 3: https://getbootstrap.com/docs/3.3/components/#navbar
-
Porém no curso em que estou realizando é possivel fazer desta forma,só que eles tao utilizando bootstrap 3 e estamos atualmente na versao 4 pode influenciar no resultado? @hugocsl 8/01/2018 às 15:31
-
@AliceVitorRodrigues inclui na minha resposta o NavBar no Bootstrap 4 e uns links de referência pra vc fazer uma leitura mais completa.– hugocsl8/01/2018 às 16:11