David Foie Gras
David Foie Gras

Reputation: 2080

Bootstrap3 and navbar, How can I align this li tag to the right?

<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
    <div class="container-fluid">
        <ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
            <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>

            <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>

            <li class="number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>

        </ul>
    </div>
</nav>

I want to align #number_three_li to the right-side.

Like From here, I want to pull it to rhe right.

I saw some post saying pull-right in <ul> tag works well.

But because I want these <li> tags not to be collapsed even width is narrower, that is not the right answer for me.

How can I do this?

        .nav {
            display: flex;
        }
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
    <div class="container-fluid">
        <ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
            <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>
            <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-list-alt" style=""></i></a></li>

            <li class="#number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>

        </ul>
    </div>
</nav>

Upvotes: 0

Views: 48

Answers (1)

Bill Doughty
Bill Doughty

Reputation: 2310

Use inline-block for the li's instead of flex for the nav ul. Then float the number_three_li to the right.

.nav {
  //display: flex;
  width: 100%;
}

.nav > li { display: inline-block !important; }
.number_three_li { 
  float: right; 
}

@media (min-width: 768px) {
  .navbar-nav>li.number_three_li {
     float: right;
  }
} 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>

</style>

<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
    <div class="container-fluid">
        <ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
            <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>
            <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-list-alt" style=""></i></a></li>

            <li class="number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>

        </ul>
    </div>
</nav>

Upvotes: 1

Related Questions