Bootstrap 3 rejilla sin espacio

Estoy tratando de crear una cuadrícula de 2 columnas, con literalmente un 50% sin márgenes o relleno.

¿Cómo puedo lograr esto con Bootstrap 3 He intentado esto, pero terminan con márgenes negativos en los puntos de interrupción de la tableta/escritorio:

HTML 

<div class="container">
    <div class="row">
        <div class="col-sm-6 offset-0">Col 1</div>
        <div class="col-sm-6 offset-0">Col 2</div>
    </div>
</diV>

CSS 

.container {
    background: green;
    overflow: hidden;
}
.row > * {
    background: blue;
    color: #fff;
}
.row :first-child {
    background: red;
}
.offset-0 {
    padding-left: 0;
    padding-right: 0;
}

DEMO - http://jsfiddle.net/pjBzY /

Author: John Magnolia, 2013-08-13
Source

11 answers

El sistema de cuadrícula en Bootstrap 3 requiere un poco de un cambio lateral en su pensamiento desde Bootstrap 2. Una columna en BS2 (col-*) NO es sinónimo de una columna en BS3 (col-sm-*, etc), pero hay una manera de lograr el mismo resultado.

Echa un vistazo a esta actualización de tu violín: http://jsfiddle.net/pjBzY/22 / (código copiado abajo).

En primer lugar, no es necesario especificar un col para cada tamaño de pantalla si desea 50/50 columnas en todos los tamaños. col-sm-6 se aplica no solo a los pequeños pantallas, pero también medianas y grandes, lo que significa que class="col-sm-6 col-md-6" es redundante (el beneficio viene si desea cambiar los anchos de columna en pantallas de diferentes tamaños, como col-sm-6 col-md-8).

En cuanto a la cuestión de los márgenes, los márgenes negativos proporcionan una manera de alinear los bloques de texto de una manera más flexible de lo que era posible en BS2. Notarás que en el jsfiddle, el texto en la primera columna se alinea visualmente con el texto en el párrafo fuera de row except excepto en los tamaños de ventana "xs", donde las columnas no están aplicar.

Si necesita un comportamiento más cercano al que tenía en BS2, donde hay relleno entre cada columna y no hay márgenes negativos visuales, necesitará agregar un div interno a cada columna. Ver el inner-content en mi jsfiddle. Ponga algo como esto en cada columna, y se comportarán de la misma manera que los antiguos elementos col-* lo hicieron en BS2.

Jsfiddle HTML

<div class="container">
    <p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
    <div class="row">
        <div class="col-sm-6 my-column">
            Col 1
            <p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
        </div>
        <div class="col-sm-6 my-column">
            Col 2
        </div>
    </div>
</div>

Y el CSS

.row {
    border: blue 1px solid;
}
.my-column {
    background-color: green;
    padding-top: 10px;
    padding-bottom: 10px;
}
.my-column:first-child {
    background-color: red;
}

.inner-content {
    background: #eee;
    border: #999;
    border-radius: 5px;
    padding: 15px;
}
 5
Author: keithjgrant,
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-11-14 15:14:10

Otra opción sería crear su propia clase CSS especial para cada vez que desee aplicar las columnas "sin canal"..

HTML 

<div class="container">
    <div class="row no-gutter">
        <div class="col-6 col-sm-6 col-lg-6">Col 1</div>
        <div class="col-6 col-sm-6 col-lg-6">Col 2</div>
    </div>
</div>

CSS 

.no-gutter [class*="-6"] {
    padding-left:0;
}

Demo: http://bootply.com/73960

 58
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
2013-08-13 17:37:38

Siempre agrego este estilo a mi Bootstrap LESS / SASS: 

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Luego en el HTML puedes escribir: 

<div class="row row-no-padding">
 27
Author: martinedwards,
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-06-19 14:02:58

Tendría que anular los márgenes negativos de la .row en pantallas grandes, ya sea directamente o con una clase personalizada

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

Violín actualizado

 8
Author: koala_dev,
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-08-13 06:56:14

Estoy seguro de que debe haber una manera de hacer esto sin escribir mi propio CSS, es una locura que tengo que sobrescribir el margen y el relleno, todo lo que quería era una cuadrícula de 2 columnas.

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

Http://jsfiddle.net/KxCkD /

 5
Author: John Magnolia,
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-08-13 06:53:40

Generalizando en martinedwards y las ideas de otros, puede pegar un montón de columnas juntas (no solo un par) ajustando el relleno de columnas par e impar hijas. Agregar esta definición de una clase, .no-gutter, y colocarla en su elemento .row 

.row.no-gutter > [class*='col-']:nth-child(2n+1) {
    padding-right: 0;
 } 

.row.no-gutter > [class*='col-']:nth-child(2n) {
    padding-left: 0;
}

O en SCSS: 

.no-gutter  {
    > [class*='col-'] {
        &:nth-child(2n+1) {
            padding-right: 0;
        }
        &:nth-child(2n) {
            padding-left: 0;
        }
    }
}
 4
Author: yuvilio,
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-09-30 23:12:23

La respuesta dada por @yuvilio funciona bien para dos columnas pero, para más de dos, esto de aquí podría ser una mejor solución. En resumen:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
 3
Author: starfry,
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-05-23 12:26:23

Use "clearfix" en lugar de "row". Hace exactamente lo mismo excepto que no tiene un margen negativo. Paso a través de la" fila " uso y verás que es la única diferencia.

 1
Author: Kyle,
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-01-31 16:52:43

La rejilla Bootstrap 3 más potente (y 100% fluida) ahora viene en 3 tamaños. Tiny (para smartphones .col-), Pequeño (para comprimidos .col-sm - ) y Grande (para ordenadores portátiles / de sobremesa .col-lg -*). Los 3 tamaños de cuadrícula le permiten controlar el comportamiento de la cuadrícula en diferentes dispositivos (escritorio, tableta, teléfono inteligente, etc..).

A diferencia de 2.x, Bootstrap 3 no proporciona una cuadrícula fija (basada en píxeles). Si bien un diseño de ancho fijo todavía se puede obtener usando un envoltorio personalizado simple, ahora solo hay uno rejilla (fluida) basada en porcentajes. El .contenedor y .las clases de fila ahora son fluidas por defecto, así que no las uses .fila-fluido o .contenedor-líquido más en su 3.x marcado.

Fuente

 0
Author: xzegga,
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-08-13 07:13:22 
.row.row-no-padding {
    margin-left: 0 !important;
    margin-right: 0 !important;

    & > [class^="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
 0
Author: damlys,
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
2016-02-16 13:05:11

Simple puede usar la clase de abajo.

.nopadmar {
   padding: 0 !important;
   margin: 0 !important;
}
<div class="container-fluid">
  <div class="row">
	   <div class="col-md-6 nopadmar">Your Content<div>
       <div class="col-md-6 nopadmar">Your Content<div>
  </div>
</div>
 0
Author: Sandeep Pattanaik,
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
2016-06-16 05:40:38