1

我在使用 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 →&lt;/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>

在此处输入图像描述

4

2 回答 2

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>
于 2014-12-04T14:43:48.747 回答
1

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

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

于 2014-12-10T00:02:27.607 回答