Plantilla 100% de ancho de Twitter Bootstrap 3

134

Soy un novato en bootstrap y tengo una plantilla 100% ancha que quiero codificar con bootstrap. La primera columna comienza en la esquina izquierda y tengo un mapa de Google que se extiende hacia la derecha. Pensé que podría hacer esto con la container-fluidclase, pero parece que ya no está disponible. No tengo idea de cómo lograr ese diseño con bootstrap 3. Estoy usando la plantilla Geometry PSD de themeforest, el enlace aquí si desea ver el diseño: http://themeforest.net/item/geometry-design-for- geolocalización-social-networkr / 4752268

html css twitter-bootstrap layout twitter-bootstrap-3 Samia Ruponti
fuente
55
Puede personalizar Bootstrap para usar @container-*anchos como 100%. Además, .container-fluidregresará en 3.1.0. :)

Respuestas:

247

Para Bootstrap 3, necesitaría usar un contenedor personalizado y establecer su ancho al 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Aquí hay un ejemplo de trabajo en Bootply

Si prefiere no agregar una clase personalizada, puede lograr un diseño muy amplio (no 100%) envolviendo todo dentro de una col-lg-12( demostración de diseño amplio )

Actualización para Bootstrap 3.1

La container-fluidclase ha regresado en Bootstrap 3.1, por lo que puede usarse para crear un diseño de ancho completo (no se requiere CSS adicional).

Demostración de Bootstrap 3.1

Zim
fuente
13
Necesitas tener cuidado. La fila tiene un margen de -15 px a izquierda y derecha. Eso es compensado por el contenedor que tiene un relleno de 15px. La mejor manera es agregar ese relleno a su contenedor lleno y luego usar filas y columnas para hacer su cuadrícula.
rootman
66
@rootman Estoy usando class = "container container-full" y parece estar funcionando.
Kenmore
Use el contenedor de fluido junto con un col-md-12 para obtener una fila de tamaño completo. Habrá una canaleta (estándar de 15px en cada lado) que debe eliminarse. La forma más fácil es eliminarlo manualmente, utilizando el siguiente CSS personalizado: #SomeId div {padding-left: 0; relleno-derecho: 0; }
Martin
2
Gracias por la sugerencia ... el fluido de contenedor funcionó bien para mí, no se requieren otros cambios. La canaleta no presentaba ningún problema porque al establecer el color de fondo de la clase contenida, el color se mostraba en los bordes, como se deseaba, mientras que el texto y otros elementos se compensaban ligeramente, también como se deseaba.
Krishna Gupta
30

Esta es la estructura básica completa para el diseño de 100% de ancho en Bootstrap v3.0.0 . No se debe envolver su <div class="row">con containerclase. Porque la containerclase tomará mucho margen y esto no le proporcionará un diseño de pantalla completa (100% de ancho) donde bootstrap ha eliminado la clase de fluido contenedor de su primera versión móvil v3.0.0.

Entonces, comience a escribir <div class="row">sin clase de contenedor y estará listo con un diseño de 100% de ancho.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Para ver el resultado por ti mismo, he creado un bootply. Ver la salida en vivo allí. http://bootply.com/82136 Y el diseño básico completo de bootstrap 3 100% de ancho he creado una esencia. puedes usar eso. Obtén la esencia de aquí

Contéstame si necesitas más ayuda. Gracias.

Shaharia Azam
fuente
20
Esta solución agrega una barra de desplazamiento horizontal en FF debido al margen en .row. Los documentos de bootstrap dicen que .row siempre debe usarse dentro de un contenedor debido a esto: las personas que buscan crear diseños totalmente fluidos (lo que significa que su sitio se extiende por todo el ancho de la ventana gráfica) deben envolver su contenido de cuadrícula en un elemento contenedor con relleno: 0 15px; para compensar el margen: 0 -15px; utilizado en .rows. - getbootstrap.com/css/#grid-intro
nealio82
55
Nealio está en lo correcto. Aún debes usar un contenedor. Envuelvo mis filas de ancho completo en un .container-full con esta declaración CSS:.container-full { padding: 0 15px; }
tbeseda
3
Esto parece ser un error en bootstrap. Lo resolví agregando lo siguiente al elemento contenedor donde se colocan las filas de la pantalla completa: relleno: 0 15px; margen izquierdo: 0px; margen derecho: 0px;
Jorre
2
¿No .rowes necesario que todos los s estén contenidos dentro de un .container?
skube
2
Erik Flowers escribió un excelente artículo sobre la relación contenedor / fila, ¡recomiendo leerlo!
idleberg
27

Usando Bootstrap 3.3.5 y .container-fluid, así es como obtengo todo el ancho sin canales ni desplazamiento horizontal en el móvil. Tenga en cuenta que .container-fluidse reintrodujo en 3.1.

Ancho completo en dispositivos móviles / tabletas, pantalla de 1/4 en el escritorio

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Ancho completo en todas las resoluciones (móvil, mesa, escritorio)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
angularsen
fuente
20

Estás usando correctamente div.container-fluidy también necesitas un div.rowhijo. Luego, el contenido debe colocarse dentro sin columnas de cuadrícula. Si echas un vistazo a los documentos, puedes encontrar este texto:

  • Las filas deben colocarse dentro de un .container (ancho fijo) o .container-fluid (ancho completo) para una alineación y relleno adecuados.
  • Use filas para crear grupos horizontales de columnas.

No usar columnas de cuadrícula está bien como se indica aquí:

  • El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser elementos secundarios inmediatos de las filas.

Y mirando este ejemplo, puedes leer este texto:

Ancho completo, columna única : no se necesitan clases de cuadrícula para elementos de ancho completo.

Aquí hay un ejemplo en vivo que muestra algunos elementos con el diseño correcto. De esta manera, no necesitas ningún CSS o hack personalizado.

gerardnll
fuente
5

En BOOTSTRAP 4 puedes usar

<div class="row m-0">
my fullwidth div
</div>

... si solo usa un .row sin el .m-0 como div de nivel superior, tendrá un margen no deseado, lo que hace que la página sea más ancha que la ventana del navegador y provoca una barra de desplazamiento horizontal.

Felix
fuente