Zurb基金会div.row中的列没有崩溃

我遇到了Foundation 5的问题，我试图让行div中的列有倒塌的水槽。更具体地说，我有兴趣折叠外栏排水沟，以便我的导航栏和标题div很好地排列。我尝试将.collapse类应用于包含的行div以及每个列元素，但无济于事。Zurb基金会div.row中的列没有崩溃

如果有人能帮我弄清楚我错过了什么，我会非常感激！下面是页面问题部分和屏幕截图的代码，以便您可以看到我正在尝试完成的内容。

最终我想在页面的任一侧用渐变渐变（蓝色到灰色）创建一个窄的垂直条。如果可以在排水沟里做到这一点，这也是解决我的问题的好办法。提前致谢！

<!-- Header Image and Left Side Nav Links --> 

    <div class="row collapse"> 
    <div class="header-image"> 
     <nav class="top-bar-z top-bar large-12 medium-12 small-12 columns" data-topbar role="navigation" data-options="is_hover:false"> 
     <ul class="title-area"> 
      <li class="name"> 
      <h1> 
       <a href="#">Lacmhacarh</a> 
      </h1> 
      </li> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> 
     </ul> 

     <!-- Right Side Nav Links --> 
     <section class="top-bar-section"> 
      <ul class="right"> 
      <li class="divider"></li> 
      <li class="has-dropdown"> 
       <a href="#">Blog</a> 
       <ul class="dropdown"> 
       <li><a href="#">Archive</a></li> 
       <li><a href="#">Resources</a></li> 
       <li class="divider"></li> 
       <li><a href="#">See all →</a></li> 
       </ul> 
      </li> 
      <li class="divider"></li> 
      <li class="has-dropdown"> 
       <a href="#">Portfolio</a> 
       <ul class="dropdown"> 
       <li class="divider"></li> 
       <li><a href="#">Résumé<i class="fi-play"></i></a></li> 
       <li><a href="http://www.github.com/danielbonnell">GitHub</a></li> 
       <li><a href="http://www.linkedin.com/in/danielbonnell">LinkedIn</a></li> 
       <li><a href="http://www.twitter.com/acidstealth">Twitter</a></li> 
       <li class="divider"></li> 
       <li><label>Special Projects</label></li> 
       <li><a href="http://www.abhnation.com/">The Abh Nation</a></li> 
       <li><a href="#">Something Cool Here</a></li> 
       </ul> 
      </li> 
      <li class="divider"></li> 
      <li><a href="#">Contact</a></li> 
      <li class="divider"></li> 
      </ul> 
     </section> 
     </nav> 

     <!-- Header Foreground Image --> 
     <div class="large-4 columns"> 
     <div class="header-logo-left"> 
     </div> 
     </div> 

     <div class="large-4 columns"> 
     <div class="header-logo-center"> 
     </div> 
     </div> 

     <div class="large-4 columns"> 
     <div class="header-logo-right"> 
     </div> 
     </div> 
    </div> 
    </div>

enter image description here

来源

2014-12-04 ACIDSTEALTH

后重新审视我想出代码列水槽是不引起明显的NAV-栏右侧边缘偏移的问题。在“联系人”按钮之后，我添加了一个额外的分隔线，它增加了10px的空间。

下面是导航栏的那部分原始的HTML：

<li class="divider"></li> 
<li><a href="#">Contact</a></li> 
<li class="divider"></li>

而新代码：

<li class="divider"></li> 
<li><a href="#">Contact</a></li>

来源

2014-12-04 14:43:48 ACIDSTEALTH

我认为，为了.collapse工作，。列必须是该行的第一个子div。

<div class="row collapse"> 
 
    <div class="large-12 columns"> <!--gets collapsed--> 
 
    Collapsed? 
 
    </div> 
 
    </div>

来源

2014-12-10 00:02:27

Zurb基金会div.row中的列没有崩溃

回答

相关问题