html - Zurb 的基础 3.2.5 top-bar 和 toggle-topbar

Question

我的网站是RTL网站。我下载了zurb-foundation 3.2.5 自定义 rtl 方向。然而，该网站的导航使用粘性固定顶部栏，以相反的顺序呈现导航链接，如屏幕截图所示:

顺序应如下图所示:

为了获得第二个所需的屏幕截图，我尝试在 app.css 中设置以下内容:

.top-bar ul>li {
float: right;
}

这里的问题出现在小屏幕的 toggle-topbar 中，toggle-topbar 箭头仅在展开菜单之前呈现，之后它在第一个元素下消失。查看以下屏幕截图:

上面的屏幕截图显示了当使用上述 CSS 在大屏幕中正确排序导航项时，小屏幕上的导航栏。它没有显示切换箭头!

以下屏幕截图显示了正确的切换栏，但在大屏幕上的顺序不正确:

以下是用于生成此导航的 HTML 代码:

           <div class="contain-to-grid fixed">
<nav class="top-bar">
<ul>   
  <li class="name"><h1><a href="#"></a></h1></li>
   <li class="toggle-topbar"><a href="#"></a></li>  
</ul>
  <section>
    <ul class="left">    
  <li class = "active"><a href="/quran/" class="selected"><img src="/quran/img/home.png" alt="" />الرئيسية</a></li>
  <li class = ""><a href="/quran/contacts" class=""><img src="/quran/img/contact.png" alt="" />اتصل بنا</a></li>
  <li class = ""><a href="/quran/pages/about" class=""><img src="/quran/img/about.png" alt="" />عن الموقع</a></li>
    </ul>
    <ul class="right">
  <li class="">  
<div class="row collapse">
  <form controller="qurans" class="" id="QuranSearchForm" method="get" action="/quran/search">  <div class="nine mobile-three columns">
              <input name="q" type="text" id="QuranQ" title="بحث!" class="inline" placeholder="كلمات البحث..." value="" />  </div>
  <div class="three mobile-one columns">
                <a href="#" id="searchbutton" class="button expand postfix" title="بحث!" >بحث!</a>
</div>
  </form>
</div>              
  </li>
</ul>
  </section>
</nav>
 </div>

The most strange behavior in this issue: When I try to change .top-bar ul>li float property from the inspect element of Google chrome in foundation.min.css properties list related with the item and change the float to be right, it works fine in both side (The order becomes correct in large screen and the toggle arrow appears for expand and shrink the menu in small screen)!!!

现场演示可以在 this link 中找到，但请注意，在生活演示中，搜索框位于左侧。即不像屏幕截图。

Answer 1

最后我得到了依赖于@media 查询的解决方案。我在 app.css 中完成了以下操作:

.top-bar ul>li{
  float:right;  
}
@media only screen and (max-width: 940px) { .top-bar ul>li{
  float:none;  
}

}

在上面的解决方案中，我在小屏幕的情况下使用@media取消了float:right。从 this link 查看现场演示.