div.row 中的 Zurb Foundation 列未折叠答案

【问题标题】：Zurb Foundation columns in div.row are not collapsingdiv.row 中的 Zurb Foundation 列未折叠
【发布时间】：2014-12-04 02:44:31
【问题描述】：

我在使用 Foundation 5 时遇到问题，我试图让行 div 中的列具有折叠的排水沟。更具体地说，我有兴趣折叠外列装订线，以便我的导航栏和标题 div 可以很好地对齐。我尝试将 .collapse 类应用于包含的行 div 以及每个列元素，但无济于事。

如果有人能帮我弄清楚我缺少什么，我将不胜感激！下面是页面问题部分的代码和屏幕截图，以便您可以看到我要完成的工作。

最终我想在页面的两侧创建一个带有过渡渐变（蓝色到灰色）的窄垂直条。如果可以在排水沟中执行此操作，那也将是解决我的问题的好方法。提前致谢！

  <!-- 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>

【问题讨论】：

标签： css zurb-foundation zurb-foundation-5

【解决方案1】：

重新检查代码后，我发现列间距不是导致导航栏右边缘明显偏移的问题。我在“联系”按钮之后放置了一个额外的分隔线，增加了 10 像素的空间。

这是导航栏那部分的原始 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>

【讨论】：

【解决方案2】：

我相信为了使 .collapse 起作用，.columns 必须是该行的第一个子 div。

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

【讨论】：