css - tutorial - zurb foundation es posible tener un ancho de fila completo

foundation zurb buttons

Question

Estoy utilizando Foundation 3 para crear un sitio web receptivo, pero quiero que el ancho de fondo del pie de página y la navegación ocupen todo el ancho. He nombrado mis filas como

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

Traté de buscar cómo solucionar esto, pero no tengo opciones. Supongo que es una pequeña corrección en el archivo foundation.css, pero es un poco abrumador en este momento ya que soy nuevo en esto.

Cualquier poiinters muy apreciado.

Answer 1

Esto es con respecto a Foundation 5. Ninguna de las respuestas dadas hasta el momento, proporcionan anchuras completas de borde a borde. Eso es porque las .columns interiores agregan relleno.

Para un verdadero contenido de borde a borde y ancho completo, agrégalo a tu 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; }

Simplemente agregue la clase .full a .row que desea extender todo el ancho.

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

Answer 2

Estoy completamente en desacuerdo con la respuesta. ¡No deberías tener que usar!

Consulte mi artículo y demostración en http://edcharbeneau.github.com/FoundationSinglePageRWD/

Deberías poder obtener lo que necesitas a partir de ahí. La demostración es para 2.2 pero es muy similar en función a v3.

Answer 3

Foundation 6 admite esta función de forma natural con row expanded . ejemplo de código:

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

Lea más aquí: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

Answer 4

Lo que he estado haciendo es agregar una clase personalizada para poder encadenarla con .row y anular la configuración de ancho máximo.

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

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

También coloque ancho aquí para cubrir las bases, pero ya está declarado en foundation.css así que puedes omitirlo.

Answer 5

Me encontré con el mismo problema ayer. El truco es que para los bloques de ancho completo, simplemente manténlos fuera de la estructura de fila / columna, ya que la fila / columna siempre aplicará el relleno predeterminado. Mantenga sus pies de página y encabezados por sí solos, y use una fila / columna dentro de ellos.

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

No estoy seguro de si me falta algo, pero tuve que agregar un .row div para que el .centered funcione. Todavía puedo hacer que el .header tenga un fondo de ancho completo en este caso, pero el método .container no funcionó para mí.

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

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

Answer 7

Realmente querrías mantener la clase de fila, de lo contrario perderás gran parte de la potencia del sistema de cuadrícula. ¿Por qué no cambiar la configuración de $ rowWidth de 1000 (predeterminado) a 100%? Esto se puede encontrar en el archivo foundation_and_overrides.scss

Answer 8

Sé que ya hay muchas respuestas, pero creo que tengo algo nuevo que agregar en este tema si alguien está utilizando Foundation 5 y tropezó con esta pregunta (como yo).

Como Foundation está utilizando unidades REM, lo mejor sería alterar la clase .row usándolas y agregando clase extra, por lo que puede tener solo filas seleccionadas de ancho completo. Por ejemplo, al usar la clase .full :

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

Puedes ver que se usa así incluso en la página de documentación de la Fundación Zurb (sin embargo, alteraron la clase .row ): http://foundation.zurb.com/docs/ (solo mira en el código fuente de la página)

Answer 9

Si está utilizando Zurb Foundation Framework, simplemente elimine la clase de row y ajuste el elemento en un container clase que tenga un ancho del 100%. Ahora que probablemente quieras centrar las cosas, usa la clase centered así:

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

Answer 10

Si no le das la clase "fila" y colocas columnas dentro, funciona con un ancho del 100%

Answer 11

Si usas sass, esta es una mejor manera:

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

Answer 12

Simplemente anule la propiedad max-width: initial; como max-width: initial; , por ejemplo,

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

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

esto funciona para mí :)

Answer 13

Solo configura el

$row-width: 100%;

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

Answer 14

Use "Sección" como en:

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

Luego, asigne una ID a la sección y úselo para su fondo.

Answer 15

sí, solo usa esto:

  <div class="large-12 columns">

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>

  </div>