web-dev-qa-db-fra.com

Barre de navigation centrée sur toute la largeur - Fondation Zurb

J'utilise Zurb Foundation 4 et j'ai besoin que la barre de navigation supérieure soit centrée comme .large-12.columns

enter image description here

J'ai essayé ce qui suit (mais ça ne marche pas)

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

Mise à jour:  

J'ai créé jsFiddle basé sur Exemple de fondation Si la taille du navigateur est grande, la largeur de la navigation change. Mais je veux qu'il soit centré comme contenu principal.

cssresponsive-designzurb-foundation
18
dpaluy

Comme le dit la Fondation 4: http://foundation.zurb.com/docs/components/top-bar.html

Si vous souhaitez que votre navigation soit définie sur votre largeur de grille, placez-la dans div class = "contenir-à-grille" .

Donc, essayez d'utiliser ce qui suit:

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

J'espère que cela t'aides !

36
Guillaume

Si je comprends bien ce que vous voulez, vous devez juste envelopper votre élément nav.top-bar dans un div avec la classe contenir-à-grille .

<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

La structure de base permet à rowvariable__le premier <div class="row"> d'obtenir la largeur de la page, mais vous pouvez y placer un autre <div class="row"> qui a une largeur inférieure à 12 colonnes.

Vous pouvez consulter la documentation associée à cette fonctionnalité ici: http://foundation.zurb.com/docs/components/grid.html

Êtes-vous sûr que la ligne que vous collez dans la question est la première de votre code HTML? Si c'est le cas, pouvez-vous coller un lien pour une démonstration de votre code s'il vous plaît?

MODIFIER

Si je comprends bien les droits, c'est assez simple à faire avec 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