Question

我遇到了基础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>

enter image description here

Answer 1

重新检查代码后，我发现列排水沟不是导致导航栏右边缘明显偏移的问题。在＆＃34;联系＆＃34;之后我放了一个额外的分隔线。按钮，增加了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>

Answer 2

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

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

div.row中的Zurb Foundation列不会崩溃

2 个答案: