fondation zurb : est-il possible d'avoir une largeur de rangée complète ?

Question

J'utilise Foundation 3 pour créer un site Web réactif, mais je souhaite que la largeur de l'arrière-plan du pied de page et de la navigation occupe la totalité de la largeur ? J'ai nommé mes rangées comme suit

class="row navigation"
class="row footer"

J'ai essayé de chercher comment résoudre ce problème mais je n'ai plus d'options. Je suppose qu'il s'agit d'un petit correctif dans le fichier foundation.css, mais c'est un peu trop compliqué pour le moment, car je suis novice en la matière.

Toute information est la bienvenue.

Answer 1

J'ai rencontré le même problème hier. L'astuce est la suivante : pour les blocs d'extension pleine largeur, il suffit de les laisser en dehors de la structure ligne/colonne, puisque la ligne/colonne appliquera toujours le remplissage par défaut. Conservez vos pieds de page et vos en-têtes séparément, et utilisez la structure rangée/colonne à l'intérieur de ceux-ci.

<header>
    This will span the full width of the page
</header>
<div class="row">
    <div class="twelve columns">
        This text will flow within all typical padding and margins
    </div>
</div>
<footer>
    This will span the full width of the page
    <div class="row">
        <div class="twelve columns">
            This text will flow within all typical padding and margins
        </div>
    </div>
</footer>

Answer 2

Ce que j'ai fait, c'est ajouter une classe personnalisée pour pouvoir la chaîner avec .row et remplacer le paramètre de largeur maximale.

<div class="row full-width"></div>

.row.full-width {
  width: 100%;
  max-width: 100%; 
}

J'ai mis width ici aussi pour couvrir les bases, mais il est déjà déclaré dans foundation.css donc vous pouvez simplement l'omettre.

Answer 3

Si vous utilisez le cadre de la fondation Zurb, il suffit de supprimer l'icône de la fondation. row et envelopper l'élément dans une classe container qui a une largeur de 100%. Maintenant vous voulez probablement centrer le truc, utilisez la classe centered comme ça :

<div class="container navigation">
    <div class="centered">
        Some navigation stuff
    </div>
</div>

Answer 4

Je ne suis pas du tout d'accord avec la réponse. Vous ne devriez pas avoir à utiliser !important

Veuillez consulter mon article et ma démo à l'adresse suivante http://edcharbeneau.github.com/FoundationSinglePageRWD/

Vous devriez pouvoir obtenir ce dont vous avez besoin à partir de là. La démo est pour la 2.2 mais son fonctionnement est très similaire à celui de la v3.

Answer 5

Utilisez "Section" comme dans :

<section>
  <div class="row">
   <div class="small-12 columns">
   </div>
  </div>
</section>

Ensuite, attribuez un ID à la section et utilisez-le pour votre arrière-plan.