Zurb基础3.2.5顶杆和切换杆

Question

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

订单应如以下屏幕截图所示：

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

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

此处出现的问题是小屏幕中的切换顶部栏，其中仅在展开菜单之前呈现切换顶部框箭头，之后它在第一个项目下消失。请看以下屏幕截图：

上面的屏幕截图显示了使用上述CSS在大屏幕中正确订购导航项目时小屏幕上的导航栏。它没有显示切换箭头！

以下scrren镜头显示正确的切换栏，但大屏幕上的顺序不正确：

以下是用于生成此导航的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>

  

此问题中最奇怪的行为：当我尝试从Google的inspect元素更改.top-bar ul＆gt; li float属性时   foundation.min.css中与项目相关的属性列表中的chrome   将浮动更改为正确，它在两侧工作正常（顺序   在大屏幕中变得正确，并显示切换箭头   在小屏幕中展开和缩小菜单）!!!

现场演示可以在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来取消浮动：在小屏幕的情况下。观看this link的实时演示。