Bootstrap3 и navbar, Как я могу выровнять этот тег li вправо? - PullRequest
Новая
       5

Bootstrap3 и navbar, Как я могу выровнять этот тег li вправо?

0 голосов
/ 25 мая 2018 
<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>

Я хочу выровнять #number_three_li по правой стороне.

Как и из здесь , я хочу переместить его вправо.

Я видел сообщение о том, что pull-right в теге <ul> работает хорошо.

Но так как я хочу, чтобы эти <li> теги не были свернуты, даже если ширина уже, это не правильный ответ для меня.

Как я могу это сделать? 

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

1 Ответ

0 голосов
/ 25 мая 2018

Используйте встроенный блок для li вместо flex для nav ul.Затем введите число_три_ли вправо. 

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