My pull-right class is not pushing the menu right Can someone help me?

Navigation
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;
}
    
asked by anonymous 08.01.2018 / 14:21

1 answer

1

For the pull-right class to work, it needs to follow a hierarchy of Classes within the Bootstrap Pattern. This is when a Daughter Class only works inside a Parent Class, in short, for the class to function it depends on another class in the Parent element.

The way you set up NavBar has several "errors" according to the Bootstrap3 documentation. I saw that you tried not to use the default CSS styles, but for that the correct one would be to make another CSS, or use css/estilo.css itself to override those original BS3 classes.

Here's an example of NavBar working with 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><scriptsrc="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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Between Bootstrap 3 and 4 there are a number of changes, and using the classes within one another will cause various problems . Here is a list of some changes.

link

  

Here is the official Bootstrap 4 NavBar Documentation: link

     

Here are several NavBar templates from BootStrap3 to study: link

     

Bootstrap 3 NavBar Official Documentation: link

    
08.01.2018 / 14:48
Doubt about Querys Inner Join ORM Django