Zurb的基础3.2.5顶杆和切换顶杆

我的网站是RTL网站。我下载了zurb-foundation 3.2.5用rtl方向自定义。然而，使用粘性固定顶栏的网站导航，呈现在翻领为了导航链接，如图所示的屏幕截图： enter image description here Zurb的基础3.2.5顶杆和切换顶杆

顺序应该是如下面的屏幕截图： enter image description here

为了获得第二，需要的话，屏幕截图，我试图设置在app.css如下：

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

这里的问题与肘顶栏会出现在小屏幕，切换到pbar箭头只在展开菜单之前呈现，然后在第一个项目下消失。请看下面的屏幕截图：

enter image description here

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

下scrren截图显示了正确的拨动杆，但与大屏幕上的不正确的顺序： enter image description here

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

在这个问题中最奇怪的行为：当我试图改变.top-bar ul> li浮动属性从谷歌铬的检查元素在foundation.min.css属性l ist与该项目相关并且将浮动更改为正确，它在两侧都可以正常工作（在大屏幕中订单变为正确，并且显示的切换箭头在小屏幕中展开和缩小菜单）！

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

来源

2013-04-02 SaidbakR

最后我得到了依赖于@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查看现场演示。

来源

2013-04-03 15:02:06 SaidbakR

Zurb的基础3.2.5顶杆和切换顶杆

回答

相关问题