web-dev-qa-db-ja.com

全幅中央ナビゲーショントップバー-ZurbFoundation

Zurb Foundation 4を使用しており、トップバーのナビゲーションを。large-12.columnsのように中央に配置する必要があります

enter image description here

私は以下を試しました（しかしそれはうまくいきません）

<div class="row">
  <div class="large-12 columns">
      <nav class="top-bar">
        <ul class="title-area">
          ...
        </ul>

        <section class="top-bar-section">
          <ul class="left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>

          <ul class="right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </section>
    </nav>
  </div>
</div>

更新：

私は jsFiddleFoundation Example に基づいて作成しました==ブラウザのサイズが大きい場合、ナビゲーションの幅が変わります。しかし、私はそれをメインコンテンツとして中央に固定して欲しいです。

cssresponsive-designzurb-foundation
19
dpaluy

Foundation 4のドキュメントによると： http://foundation.zurb.com/docs/components/top-bar.html

ナビゲーションをグリッド幅に設定する場合は、div class = "contain-to-grid"で囲みます。

したがって、以下を使用してみてください。

<div class="contain-to-grid">
    <!-- Your nav bar -->
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title area here... -->
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <!-- Title area here... -->
            </ul>
            <ul class="right">
                <!-- Title area here... -->
            </ul>
        </section>
     </nav>
</div>

お役に立てれば ！

36
Guillaume

私があなたが欲しいものを正しく理解しているなら、あなたはあなたのnav.top-bar要素をdivでラップする必要がありますcontain-to-grid =。

<div class="row">
  <div class="contain-to-grid">
    <nav class="top-bar">
      <ul class="title-area">
        ...
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>

        <ul class="right">
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </section>

    </nav>
  </div>
</div>
7
Carlos Garcia

Foundationフレームワークでは、ネストされたrow最初の<div class="row">でページの幅を取得できますが、別の<div class="row">をページに挿入して12列の最大幅を小さくすることもできます。

この機能に関連するドキュメントは、次の場所で確認できます。 http://foundation.zurb.com/docs/components/grid.html

質問に貼り付けた行がHTMLコードの最初の行であると確信していますか？もしそうなら、あなたのコードのデモへのリンクを貼り付けてもらえますか？

編集

私がそれの権利を理解しているなら、CSSで行うのはかなり簡単です：

.top-bar {
    max-width: 900px;
    margin:auto;
}
1
Xavier
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
    <div class="row">
        <div class="large-12 columns">
            <ul class="menu" data-responsive-menu="accordion">
                <li><a href="#">1</a>
                </li>
                <li><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
0
user1808292