web-dev-qa-db-fra.com

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

J'utilise Foundation 3 pour créer un site Web réactif, mais je veux que la largeur d'arrière-plan du pied de page et de la navigation occupe toute la largeur? J'ai nommé mes lignes comme

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 que c'est un petit correctif dans le fichier foundation.css mais c'est un peu trop écrasant pour le moment car je suis nouveau.

Tous poiinters très appréciés.

csshtml5responsive-designzurb-foundationgrid-system
33
Chou One

J'ai rencontré le même problème hier. L'astuce est que, pour les blocs s'étendant sur toute la largeur, il vous suffit de les garder hors de la structure ligne/colonne, car la ligne/colonne appliquera toujours le remplissage par défaut. Gardez vos pieds de page et en-têtes seuls et utilisez des lignes/colonnes à l'intérieur.

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

Ce que j'ai fait, c'est d'ajouter une classe personnalisée afin de pouvoir la chaîner avec .row et remplacer le paramètre max-width.

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

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

J'ai également mis la largeur ici pour couvrir les bases, mais elle est déjà déclarée dans foundation.css, vous pouvez donc simplement l'omettre.

65
Stacey Schlenker

Si vous utilisez Zurb Foundation Framework, supprimez simplement la classe row et enveloppez l'élément dans une classe container d'une largeur de 100%. Maintenant, vous voulez probablement centrer le contenu, utilisez la classe centered comme ceci:

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

Je suis totalement en désaccord avec la réponse. Vous ne devriez pas avoir à utiliser! Important

Veuillez vous référer à mon article et à ma démo sur http://edcharbeneau.github.com/FoundationSinglePageRWD/

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

8
Ed Charbeneau

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.

4
Troy

Foundation 6 prend naturellement en charge cette fonctionnalité avec row expanded. exemple de code:

<div class="expanded row">
    ...
</div>

En savoir plus ici: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

3
elicohenator

Il s'agit de Foundation 5. Aucune des réponses données jusqu'à présent ne fournit de largeur à bord pleine largeur. C'est parce que l'intérieur .columns ajouter un rembourrage.

Pour un véritable contenu bord à bord, pleine largeur, ajoutez-le à votre CSS.

.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }

Ajoutez simplement .full classe à un .row vous souhaitez étendre toute la largeur.

<div class="row full">
  <div class="medium-6 column">This column touches Left Edge.</div>
  <div class="medium-6 column">This column touches Right Edge.</div>
</div>
3
timofey.com

Je sais qu'il y a déjà beaucoup de réponses, mais je pense que j'ai quelque chose de nouveau à ajouter dans ce sujet si quelqu'un utilise Foundation 5 et est tombé sur cette question (comme moi).

Comme Foundation utilise REM unités, il serait préférable de modifier .row classe en les utilisant et en ajoutant une classe supplémentaire, de sorte que vous ne pouvez avoir que des lignes sélectionnées pleine largeur. Par exemple, en utilisant .full classe:

.row.full {
    max-width: 80rem;  /* about 90rem should give you almost full screen width */
}

Vous pouvez voir qu'il est utilisé comme ça même dans la page de documentation de Zurb Foundation (ils ont modifié .row classe, cependant): http://foundation.zurb.com/docs/ (il suffit de regarder le code source de la page)

3
wasil

Remplacez simplement le max-width propriété en tant que max-width: initial;, par exemple,

    .fullWidth {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       max-width: initial;
    }

<div class="row fullWidth"> </div>

cela fonctionne pour moi :)

2
Able Alias

Vous voudriez vraiment garder la classe de ligne sinon vous perdrez beaucoup de puissance du système de grille. Pourquoi ne pas changer le paramètre pour $ rowWidth de 1000 (par défaut) à 100%. Cela peut être trouvé dans le fichier foundation_and_overrides.scss

1
stephen

Réglez simplement le

$row-width: 100%;

http://foundation.zurb.com/forum/posts/927-full-width-layouts

1
Philip

Je ne sais pas si je manque quelque chose, mais j'ai dû ajouter un .row div pour le .centered travailler. Je peux toujours coiffer le .header pour avoir un arrière-plan pleine largeur dans ce cas, mais le .container la méthode n'a pas fonctionné pour moi.

<header class="header">
  <div class="row">
    <div class="centered">
       Logo and stuff
    </div>
  </div>

  <div class="row">
    Some navigation stuff   
  </div>
</header>
0
Jordan

Si vous ne lui donnez pas la classe "row" et mettez des colonnes à l'intérieur, cela fonctionne sur une largeur de 100%

0
David 天宇 Wong

Si vous utilisez sass, c'est une meilleure façon:

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

.row{
    &.full-width{ 
        width: 100%; 
        max-width: 100%!important; //might be needded depending on your settings
        &>.column:first-child,
        &>.columns:first-child{ 
            padding-left: 0; 
        }
        &>.column:last-child,
        &>.columns:last-child{ 
            padding-right: 0; 
        }
    }
}
0
Claudiu Creanga