css - color - Diseño de ancho completo con Twitter bootstrap

bootstrap tooltip

Question

Estoy tratando de lograr un diseño similar a este: http://dribbble.com/shots/829195-Slate/attachments/86422

Mi proyecto usa Twitter Bootstrap con diseño receptivo. ¿Es posible implementar un diseño de ancho completo con Bootstrap?

El problema es que, por lo que he estado leyendo, los diseños fluidos se eliminarán en el programa de arranque 3.0, y el diseño receptivo tiene anchos fijos.

Answer 1

Actualizar:

Bootstrap 3 se ha lanzado ya que esta pregunta se contestó originalmente en enero, por lo tanto, si usted es usuario de BS3, consulte la documentation BS3. Para aquellos que todavía están en BS2, la respuesta original todavía se aplica. Si está interesado en cambiar de 2 a 3, consulte la guía de migration .

Respuesta original:

Del bootstrap 2 docs :

Haga cualquier fila "líquida" cambiando .row a .row-fluid. Las clases de columnas permanecen exactamente igual, lo que facilita el cambio entre cuadrículas fijas y fluidas.

Código

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Esto, junto con establecer el ancho de su contenedor a un valor fluido, le permitirá obtener el diseño deseado.

Answer 2

A partir de la última versión de Bootstrap (3.1.x), la forma de lograr un diseño fluido es usar .container-fluid clase de .container-fluid .

Ver la getbootstrap.com/css/#grid para referencia

Answer 3

Aquí hay un ejemplo de un diseño de 100% de ancho y 100% de altura con Bootstrap 3.

http://bootply.com/tofficer/77686

Answer 4

Creo que podrías usar la clase "col-md-12", requiriendo almohadillas izquierdas y derechas y un ancho del 100%. Parece que este es un buen reemplazo para el fluido de contenedor del segundo bootstrap.

Answer 5

Debido a que la respuesta aceptada no está en el mismo planeta que BS3, compartiré lo que estoy usando para lograr capacidades de casi todo el ancho.

En primer lugar, esto es hacer trampa. No es realmente el ancho del fluido, pero parece serlo, dependiendo del tamaño de la pantalla que mire el sitio.

El problema con BS3 y los sitios de ancho de fluido es que han adoptado este enfoque de "móvil primero", que requiere que definan cada ancho de pantalla anormal hasta lo que consideran de escritorio (1200px) Estoy trabajando en una computadora portátil con un 1900px pantalla ancha, así que termino con 350px en cada lado del contenido en lo que BS3 cree que es un ancho de escritorio.

Han definido 10 anchos de pantalla (realmente solo 5, pero de todos modos). Realmente no me siento cómodo al cambiarlos, porque son anchos comunes. Por lo tanto, elegí definir algunos anchos adicionales para BS para elegir al decidir el ancho de la clase contenedor.

La forma en que uso BS es tomar todos los archivos LESS proporcionados por Bootstrap, omitir el archivo variables.less para proporcionar el mío y agregar uno propio al final para anular las cosas que quiero cambiar. Dentro de mi archivo menos, agrego lo siguiente para lograr 2 configuraciones de ancho de pantalla comunes:

@media screen and (min-width: 1600px) {
    .container {
        max-width: (1600px - @grid-gutter-width);
    }
}
@media screen and (min-width: 1900px) {
    .container {
        max-width: (1900px - @grid-gutter-width);
    }
}

Estas dos configuraciones establecen el ejemplo de lo que necesita hacer para lograr diferentes anchos de pantalla. Aquí, obtienes ancho completo a 1600px y 1900px. Cualquier menos de 1600 BS cae de nuevo al ancho de 1200 píxeles, luego a 768 píxeles y así sucesivamente, hasta el tamaño del teléfono.

Si tiene más capacidad para admitir, simplemente cree más declaraciones de pantalla @media como estas. Si está construyendo CSS en su lugar, querrá determinar qué ancho de canal se utilizó y restarlo del ancho de la pantalla de destino.

Actualización: BS 3.0.1 y superior (hasta ahora) - es tan fácil como configurar @ contenedor-gran escritorio para 100%

Answer 6

En Bootstrap 3, las columnas se especifican utilizando porcentajes. (En Bootstrap 2, este era solo el caso si una columna / span estaba dentro de un elemento .row-fluid , pero eso ya no es necesario y esa clase ya no existe.) Si usa un .container , entonces @Michael tiene toda la razón que estarás atrapado con un diseño de ancho fijo. Sin embargo, debe estar en buena forma si solo evita usar un elemento .container.

<body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

El margen para el cuerpo ya es 0, por lo que debería poder levantarse hasta el borde. (Las columnas aún tienen un relleno de 15 píxeles en ambos lados, por lo que es posible que tenga que contabilizar eso en su diseño, pero esto no debería detenerlo, y siempre puede personalizarlo cuando descargue Bootstrap).

Answer 7

Encontrará un excelente tutorial aquí: bootstrap-3-grid-introduction y la respuesta para su pregunta es <div class="container-fluid"> ... </div>

Answer 8

La manera más fácil con BS3 es restablecer el ancho máximo y el relleno establecidos por BS3 CSS simplemente así. Obtienes nuevamente un fluido contenedor:

.container{
  max-width:100%;
  padding:0;
}

Answer 9

Simplemente crea otra clase y agrégala junto con la clase de container bootstrap. También puedes usar container-fluid .

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

La parte de CSS es bastante simple

* {
    margin: 0;
    padding: 0;
}
.full-width {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

Espero que esto ayude, gracias!

Answer 10

*{
   margin:0
   padding:0
}

asegúrate de que el ancho de tu contenedor sea:% 100