100% ancho Twitter Bootstrap 3 plantilla

Soy un novato de 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 los tramos a la derecha. Pensé que podría hacer esto con la clase container-fluid, pero eso ya no parece estar disponible. No tengo idea de cómo lograr ese diseño con bootstrap 3. Estoy usando la plantilla PSD Geometría de themeforest, el enlace aquí si quieres ver el diseño : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

Author: ROMANIA_engineer, 2013-08-26
Source

4 answers

Para Bootstrap 3, necesitará usar una envoltura personalizada y establecer su ancho en 100%.

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

Aquí es 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 ancho )

Actualización para Bootstrap 3.1

La clase container-fluid ha regresado en Bootstrap 3.1, por lo que se puede usar para crear un diseño de ancho completo (sin CSS adicional requerir)..

Bootstrap 3.1 demo

 227
Author: Zim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-17 18:31:28

Esta es la estructura básica completa para 100% width layout en Bootstrap v3.0.0. No debe envolver su <div class="row"> con container clase. Causa container la clase tomará mucho margen y esto no le proporcionará un diseño de pantalla completa (100% de ancho) donde bootstrap ha eliminado la clase container-fluid de su versión mobile-first v3.0.0.

Así que simplemente comienza a escribir <div class="row"> sin la clase de contenedor y estás listo para ir con el diseño de ancho 100%.

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

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

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

 28
Author: Shaharia Azam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-20 11:16:45

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

Ancho completo en móvil / tableta, pantalla 1/4 en 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 total 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>
 26
Author: angularsen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-15 08:17:18

Tienes razón al usar div.container-fluid y también necesitas un hijo div.row. 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 a .contenedor (ancho fijo) o .contenedor-fluido (ancho completo) para una alineación y relleno adecuados.
  • Utilice filas para crear grupos horizontales de columnas.

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

  • Content should be placed within columns, and only columns may be immediate children's of rows.

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í está un ejemplo en vivo que muestra algunos elementos usando el diseño correcto. De esta manera no necesita ningún CSS personalizado o hack.

 20
Author: gerardnll,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-13 11:01:21