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

コードを再検討した後、ナビゲーション バーの右端に明らかなオフセットが生じているのは、列のガターが問題ではないことがわかりました。「連絡先」ボタンの後に余分な仕切りを配置しました。これにより、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-04T14:43:48.747 に答える