html - Bootstrap3 和导航栏，如何将这个 li 标签右对齐？

Question

<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到右边。

喜欢来自 here , 我想把它拉到右边。

我看到一些帖子说 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>

Answer 1

为 li 使用 inline-block 而不是为 nav ul 使用 flex。然后将 number_three_li 向右浮动。

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