¿Cuándo debo usar contenedor y fila en Twitter Bootstrap 3?

Question 1

Por favor, explíqueme cuándo usar las clases containery row. No estoy seguro porque la documentación de Bootstrap no es clara sobre esta parte.

Estoy usando Bootstrap 3.

Question 2

containeres un contenedor de rowelementos.

row los elementos son contenedores de columnas (los documentos lo llaman sistema de cuadrícula)

Además, containerestablece los márgenes del contenido relacionados con los comportamientos receptivos de su diseño.

Por lo tanto, la containerclase se usa a menudo para crear contenidos 'en caja' basados en las pautas de estilo del proyecto Bootstrap.

Si desea "salir de la caja" para crear una cuadrícula de ancho completo, puede usar solo rowelementos con columnas adentro (que abarcan el total habitual de 12 colores).

Las clases containery rowson para elementos dentro del cuerpo. Entonces, un diseño básico sería:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Para un diseño receptivo en caja.

Si omite el container, obtendrá un diseño de ancho completo.

Ejemplo de Jumbotron

Jumbotron es un buen ejemplo del containercomportamiento. Si coloca un elemento Jumbotron en un containerelemento, tiene bordes redondeados y un ancho fijo basado en el ancho de respuesta. Si el Jumbotron está fuera de un contenedor, ocupa todo el ancho sin bordes.

Question 3

Me estaba preguntando sobre lo mismo y para entender que pasé por la bootstrap.cssversión 3. La respuesta está en la línea no. 1585 a 1605. Publicaré esas líneas aquí para una mejor comprensión como se muestra a continuación.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Todo el código se explica por sí mismo. Sin embargo, para más detalles sobre esto, contenedor tomaría 750pxsi ancho de la pantalla es de entre 768pxy 992pxy así sucesivamente como los espectáculos de código. Ahora, para una resolución de pantalla común de más de 1200, el contenedor ocuparía 1170px, pero restando el relleno de 30 px( 15px+15px), el espacio efectivo a la izquierda es 1140px, que está centrado en la pantalla ya que el margen de la izquierda y la derecha está configurado en automático.

Ahora, en el caso de class="row", hay el siguiente código:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Entonces, si la fila está dentro del contenedor, efectivamente arrebatará el relleno de 15px a cada lado del contenedor y usará el espacio completo. Pero si la fila de la clase está dentro de la etiqueta del cuerpo, tenderá a moverse fuera del área visible hacia el lado izquierdo y derecho del navegador debido a los márgenes negativos.

Espero que quede claro.

Question 4

Envase

El contenedor proporciona las restricciones de ancho en los anchos de respuesta. Cuando cambian los tamaños de respuesta, es el contenedor el que cambia. Todas las filas y columnas se basan en porcentajes, por lo que no es necesario cambiarlas. Tenga en cuenta que hay un margen de 15px en cada lado, cancelado por filas.

Filas

Las filas siempre deben estar en un recipiente.

La fila proporciona a las columnas un lugar para vivir, idealmente con columnas que suman 12. También actúa como un contenedor ya que todas las columnas flotan a la izquierda, las filas adicionales no se superponen cuando los flotadores se vuelven raros.

Las filas también tienen un margen negativo de 15px en cada lado. El div que forma la fila normalmente estaría restringido dentro del relleno de los contenedores, tocando los bordes del área rosa pero no más allá. Los márgenes negativos de 15px empujan la fila por encima del relleno de 15px del contenedor, esencialmente negándolo. Además, las filas le aseguran que todos los divs dentro de ella aparezcan en su propia línea, separados de las filas anterior y siguiente.

Columnas

Las columnas ahora tienen un relleno de 15px. Este relleno significa que las columnas realmente tocan el borde de la fila, que a su vez toca el borde del contenedor, ya que la fila tiene el margen negativo y el contenedor tiene el relleno positivo. Pero, el relleno de la columna empuja cualquier cosa dentro de la columna hacia donde debe estar, y también proporciona el margen de 30px entre columnas. Nunca use una columna fuera de una fila, no funcionará.

Para obtener más información, le sugiero que lea este artículo . Es realmente claro y explica bien cómo funciona el sistema de cuadrícula de Bootstrap.

Question 5

La clase 'contenedor' envuelve el contenido dentro del centro del puerto de visualización. Todo el contenido con etiqueta en el cuerpo se puede colocar en los resultados de la página mostrada de ancho especificado en el centro de la página.

La clase 'fila' se usa cuando necesita colocar contenido en columnas en una fila, puede tener hasta 12 columnas en total en cada fila.

Question 6

En las prácticas tradicionales de CSS, probablemente usaría las siguientes clases:

wrapper, header, navigator, contents, footer

el uso de las clases anteriores puede ser como este ejemplo:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

En bootstrap puede usar si lo desea o si está acostumbrado a la plantilla anterior las clases de bootstrap como este ejemplo:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

Para la clase de fila, puede usar la clase de fila cuando desee diseñar un diseño tabular para la página, pero cuando desee mostrar datos en formato de tabla, debe usar la clase de tabla, pero la tabla no responderá.

Para crear un diseño tabular que sea diferente de las tablas de datos, use la clase de fila como en este ejemplo:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

Debe intentar evitar el uso de un diseño basado en tablas e intentar usar tablas receptivas como se describe aquí

Answer 1

84

Por favor, explíqueme cuándo usar las clases containery row. No estoy seguro porque la documentación de Bootstrap no es clara sobre esta parte.

Estoy usando Bootstrap 3.

twitter-bootstrap-3 CodeShark
fuente

1

Lea este artículo sobre las filas y columnas de Bootstrap

Zim

Answer 2

1

Lea este artículo sobre las filas y columnas de Bootstrap

Zim

Answer 3

containeres un contenedor de rowelementos.

row los elementos son contenedores de columnas (los documentos lo llaman sistema de cuadrícula)

Además, containerestablece los márgenes del contenido relacionados con los comportamientos receptivos de su diseño.

Por lo tanto, la containerclase se usa a menudo para crear contenidos 'en caja' basados en las pautas de estilo del proyecto Bootstrap.

Si desea "salir de la caja" para crear una cuadrícula de ancho completo, puede usar solo rowelementos con columnas adentro (que abarcan el total habitual de 12 colores).

Las clases containery rowson para elementos dentro del cuerpo. Entonces, un diseño básico sería:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Para un diseño receptivo en caja.

Si omite el container, obtendrá un diseño de ancho completo.

Ejemplo de Jumbotron

Jumbotron es un buen ejemplo del containercomportamiento. Si coloca un elemento Jumbotron en un containerelemento, tiene bordes redondeados y un ancho fijo basado en el ancho de respuesta. Si el Jumbotron está fuera de un contenedor, ocupa todo el ancho sin bordes.

Answer 4

1

Entonces, ¿es una buena práctica darle al cuerpo HTML el contenedor de la clase o es una mala práctica? Si es malo, ¿por qué?

CodeShark

Answer 5

1

@CodeShark es malo porque es una parte estructural del diseño. Es posible que desee, por ejemplo, una barra de navegación de ancho completo y un pie de página de ancho completo, pero un contenido en caja de la página.

Paolo Casciello

Answer 6

1

Si desea "salir de la caja" para crear una cuadrícula de ancho completo, puede usar solo rowelementos con columnas adentro (que abarcan el total habitual de 12 colores). Creo que puedes usar container-fluidy row-fluidpara esto. (Bootstrap principiante aquí,

tómalo

Answer 7

@Zim, tu enlace está muerto.

Negro

Answer 8

Me estaba preguntando sobre lo mismo y para entender que pasé por la bootstrap.cssversión 3. La respuesta está en la línea no. 1585 a 1605. Publicaré esas líneas aquí para una mejor comprensión como se muestra a continuación.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Todo el código se explica por sí mismo. Sin embargo, para más detalles sobre esto, contenedor tomaría 750pxsi ancho de la pantalla es de entre 768pxy 992pxy así sucesivamente como los espectáculos de código. Ahora, para una resolución de pantalla común de más de 1200, el contenedor ocuparía 1170px, pero restando el relleno de 30 px( 15px+15px), el espacio efectivo a la izquierda es 1140px, que está centrado en la pantalla ya que el margen de la izquierda y la derecha está configurado en automático.

Ahora, en el caso de class="row", hay el siguiente código:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Entonces, si la fila está dentro del contenedor, efectivamente arrebatará el relleno de 15px a cada lado del contenedor y usará el espacio completo. Pero si la fila de la clase está dentro de la etiqueta del cuerpo, tenderá a moverse fuera del área visible hacia el lado izquierdo y derecho del navegador debido a los márgenes negativos.

Espero que quede claro.

Answer 9

pero como no usa filas sin columnas adentro, está bien, porque las columnas tienen nuevamente un relleno de 15px. Entonces todo es casi perfecto.

Falk

Answer 10

Envase

El contenedor proporciona las restricciones de ancho en los anchos de respuesta. Cuando cambian los tamaños de respuesta, es el contenedor el que cambia. Todas las filas y columnas se basan en porcentajes, por lo que no es necesario cambiarlas. Tenga en cuenta que hay un margen de 15px en cada lado, cancelado por filas.

Filas

Las filas siempre deben estar en un recipiente.

La fila proporciona a las columnas un lugar para vivir, idealmente con columnas que suman 12. También actúa como un contenedor ya que todas las columnas flotan a la izquierda, las filas adicionales no se superponen cuando los flotadores se vuelven raros.

Las filas también tienen un margen negativo de 15px en cada lado. El div que forma la fila normalmente estaría restringido dentro del relleno de los contenedores, tocando los bordes del área rosa pero no más allá. Los márgenes negativos de 15px empujan la fila por encima del relleno de 15px del contenedor, esencialmente negándolo. Además, las filas le aseguran que todos los divs dentro de ella aparezcan en su propia línea, separados de las filas anterior y siguiente.

Columnas

Las columnas ahora tienen un relleno de 15px. Este relleno significa que las columnas realmente tocan el borde de la fila, que a su vez toca el borde del contenedor, ya que la fila tiene el margen negativo y el contenedor tiene el relleno positivo. Pero, el relleno de la columna empuja cualquier cosa dentro de la columna hacia donde debe estar, y también proporciona el margen de 30px entre columnas. Nunca use una columna fuera de una fila, no funcionará.

Para obtener más información, le sugiero que lea este artículo . Es realmente claro y explica bien cómo funciona el sistema de cuadrícula de Bootstrap.

Answer 11

La clase 'contenedor' envuelve el contenido dentro del centro del puerto de visualización. Todo el contenido con etiqueta en el cuerpo se puede colocar en los resultados de la página mostrada de ancho especificado en el centro de la página.

La clase 'fila' se usa cuando necesita colocar contenido en columnas en una fila, puede tener hasta 12 columnas en total en cada fila.

Answer 12

En las prácticas tradicionales de CSS, probablemente usaría las siguientes clases:

wrapper, header, navigator, contents, footer

el uso de las clases anteriores puede ser como este ejemplo:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

En bootstrap puede usar si lo desea o si está acostumbrado a la plantilla anterior las clases de bootstrap como este ejemplo:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

Para la clase de fila, puede usar la clase de fila cuando desee diseñar un diseño tabular para la página, pero cuando desee mostrar datos en formato de tabla, debe usar la clase de tabla, pero la tabla no responderá.

Para crear un diseño tabular que sea diferente de las tablas de datos, use la clase de fila como en este ejemplo:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

Debe intentar evitar el uso de un diseño basado en tablas e intentar usar tablas receptivas como se describe aquí

¿Cuándo debo usar contenedor y fila en Twitter Bootstrap 3?

Respuestas:

Ejemplo de Jumbotron