0
<!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;
}
6
  • pelo que parece o menu ta pegando 100% da div pai, defina um tamanho pra ela com cols, talvez resolva 8/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.
    – hugocsl
    8/01/2018 às 13:27
  • @hugocsl coloquei o css 8/01/2018 às 13:29
  • @LucasHenrique coloquei cols não deu tambem 8/01/2018 às 13:33
  • Eu copiei seu código e colei aqui, e aqui o menu está para a direita sim
    – Maria
    8/01/2018 às 13:37

1 Resposta 1

1

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

2
  • 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.
    – hugocsl
    8/01/2018 às 16:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .