My pull-right class isn’t pushing the menu to the right can anyone help me?

Asked

Viewed 406 times

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;
}
css html5 twitter-bootstrap bootstrap-3 bootstrap-4

  • so it looks like the menu is taking 100% of the father div, set a size for her with cols, maybe solve

  • Alice puts the entire HTML, and if possible also put the CSS of the.CSS style, so it is easier to give you a precise answer.

  • @hugocsl put the css

  • @Lucashenrique put cols did not give either

  • I copied your code and pasted it here, and here the menu is to the right yes

  • No changes made to it?

Show 1 more comment

1 answer

1

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

The way you set up Navbar has several "bugs" according to the Bootstrap3 documentation. I saw that you tried not to use the default CSS styles, but to do this the right thing would be to make another CSS, or use the CSS itself css/estilo.css to over-write these original BS3 classes

Here’s an example of Navbar working with pull-right

In 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>

In 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>

Between Bootstrap 3 and 4 there are several changes, and use the classes from one within the other will give several problems. Here is a list of some changes.

https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

Here’s the official Navbar Bootstrap 4 Documentation: https://v4-alpha.getbootstrap.com/components/navbar/

Here are several Bootstrap3 Navbar models to study: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Official Bootstrap 3 Navbar Documentation: https://getbootstrap.com/docs/3.3/components/#navbar

  • But in the course that I am doing it is possible to do this way, only that they are using bootstrap 3 and we are currently in version 4 can influence the result? @hugocsl

  • @Alicevitorrodrigues includes in my reply Navbar in Bootstrap 4 and a reference links for you to make a more complete reading.

Browser other questions tagged css html5 twitter-bootstrap bootstrap-3 bootstrap-4

You are not signed in. Login or sign up in order to post.