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使用内联块而不是导航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>

Bootstrap3和导航栏，如何将此li标签对齐？

1 个答案: