如何將導航條目的方向從ltr更改爲rtl？

Question

我有以下引導代碼，需要將nav中的項目方向從右到左改爲從左到右（使項目1從右側開始），而不使用bootstrap-rtl ，我也嘗試在ul中使用方向：rtl，但沒有奏效。

作爲結論我需要這個形狀 請幫忙嗎？

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="logo"><a href="#"><img src="img/logob.png" alt=""></a></div> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle fl7" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">item 1</a></li> 
       <li><a href="#">item 2</a></li> 
       <li><a href="#">item 3</a></li> 
       <li><a href="#">item 4</a></li> 
       <li><a href="#">item 5</a></li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

Answer 1

如果您浮動元素li的權利，他們會以相反的順序。見snippet。

.nav.navbar-nav { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.nav.navbar-nav li { 
 
    float: right; 
 
    margin-right: 10px; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .nav.navbar-nav { 
 
    color: red; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="logo"> 
 
     <a href="#"><img src="img/logob.png" alt=""></a> 
 
    </div> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle fl7" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 

 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">item 1</a></li> 
 
     <li><a href="#">item 2</a></li> 
 
     <li><a href="#">item 3</a></li> 
 
     <li><a href="#">item 4</a></li> 
 
     <li><a href="#">item 5</a></li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav>

您可以使用媒體查詢對桌面/移動不同的行爲。 See this jsfiddle。

Answer 2

嘗試使用float ul。 CSS - UL {浮法：右}