html - parrafos - Cómo eliminar el espacio de la canaleta solo para un div específico-bootstrap

parrafos en html ejemplos

Question

El sistema de grilla Bootstrap predeterminado utiliza 12 columnas con cada tramo que tiene una canaleta de 30 píxeles como se muestra a continuación. Los canaletas son el espacio blanco entre las columnas. El ancho del canal parece estar entre 20px - 30px. Supongamos que es 30px aquí.

Quiero eliminar el espacio de la canaleta para un div específico, de modo que no haya espacio en el margen en la fila. Cada tramo estará al lado del otro sin canaleta.

El problema es que si elimino el margen 30px (canaleta) deja 360px (12 * 30) al final de la fila.

Dado que quiero eliminar el espacio de la canaleta solo para un div específico. Supongamos que es para div que están en el div principal_contenido.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

¿Cómo puedo eliminar la canaleta de un div específico sin perder la capacidad de respuesta de arranque y no dejar espacio al final de la fila?

Answer 1

Actualización: enlace para TWBS 3 getbootstrap.com/customize/#grid-system

Twitter Bootstrap ofrece un formulario personalizado para descargar todos o algunos componentes con configuración personalizada.

Puede usar este formulario para descargar una cuadrícula sin canaletas, y responderá: solo necesita el componente de cuadrícula y los receptivos relacionados con el ancho.

Demo (jsfiddle)

Si conoce un poco sobre LESS , puede incluir el CSS generado en un selector de su elección.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

De lo contrario, debe agregar este selector al frente de cada regla (no mucho de todos modos).

Si conoce LESS y usa las secuencias de comandos LESS para administrar sus estilos, es posible que desee utilizar directamente la grilla mixins v2 (github)

Grid mixins v3 (github)

Answer 2

De acuerdo Si quiere cambiar el canal dentro de una fila, pero quiere que esos (primeros y últimos) divisores internos se alineen con la cuadrícula que rodea la fila .no-gutter , puede copiar, pegar y combinar la mayoría de las respuestas en el siguiente fragmento:

.row.no-gutter [class*=''col-'']:first-child:not(:only-child) {
    padding-right: 0;
}
.row.no-gutter [class*=''col-'']:last-child:not(:only-child) {
    padding-left: 0;
}
.row.no-gutter [class*=''col-'']:not(:first-child):not(:last-child):not(:only-child) {
    padding-right: 0;
    padding-left: 0;
}

Si te gusta tener un canal más pequeño en lugar de ninguno, simplemente cambia los 0 a lo que te gusta ... (por ejemplo: 5px para obtener 10px cuneta).

Answer 3

Ejemplo 4 columnas de span3. Para otros anchos de tramo use ancho nuevo = ancho antiguo + tamaño de canaleta. Use las consultas de los medios para que sea receptivo.

css:

    <style type="text/css">
    @media (min-width: 1200px) 
    {   
        .nogutter .span3
        {
            margin-left: 0px; width:300px;
        }   
    }
    @media (min-width: 980px) and (max-width: 1199px) 
    { 
        .nogutter .span3
        {
            margin-left: 0px; width:240px;
        }   
    }
    @media (min-width: 768px) and (max-width: 979px) 
    { 
        .nogutter .span3
        {   
            margin-left: 0px; width:186px;
        }   
    }
    </style>

html:

<div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>

actualización : o divide un span12 div en 100 / numberofcolumns% width partes flotando a la izquierda:

<div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>  

Para ambas soluciones, ver: bootply.com/61557

Answer 4

El ancho total se calcula con el ancho de los elementos más el ancho del espacio del margen. Si desea eliminar el margen de margen, está bien, pero para evitar esa brecha que mencionó, también necesita aumentar el ancho de las columnas.

En este caso, necesita aumentar el ancho de una sola columna por su espacio de margen eliminado, que sería 30px.

Digamos que el ancho de tus columnas es 50PX normalmente con un margen de margen de 30PX. Elimine el espacio del margen y haga un ancho de 80PX.

Answer 5

Interesante...

Eliminando la canaleta en la cuadrícula predeterminada de Twitter Bootstrap, es decir, 940px de ancho. Y que la cuadrícula predeterminada tiene un contenedor de 940px de ancho y tiene el bootstrap-responsive.css en su hoja de estilo.

Si entendí bien tu pregunta, así es como lo hice ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> Question</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->




    <style type="text/css">
        #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
            }
        }


        @media (max-width: 767px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        @media (max-width: 480px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        <!-- For Visual Aid Only -->
        .bg1 {
            background-color: #C2C2C2;
        }

        .bg2 {
            background-color: #D2D2D2;
        }
    </style>
  <body>
    <div id="wrap">
        <div class="container">
            <div class="row-fluid">
                <div class="span1 text-center bg1">01</div>
                <div class="span1 text-center bg2">02</div>
                <div class="span1 text-center bg1">03</div>
                <div class="span1 text-center bg2">04</div>
                <div class="span1 text-center bg1">05</div>
                <div class="span1 text-center bg2">06</div>
                <div class="span1 text-center bg1">07</div>
                <div class="span1 text-center bg2">08</div>
                <div class="span1 text-center bg1">09</div>
                <div class="span1 text-center bg2">10</div>
                <div class="span1 text-center bg1">11</div>
                <div class="span1 text-center bg2">12</div>
            </div>



            <div id="main_content">
                <div class="row-fluid">
                    <div class="span3 text-center bg1">1</div>
                    <div class="span3 text-center bg2">2</div>
                    <div class="span3 text-center bg1">3</div>
                    <div class="span3 text-center bg2">4</div>
                </div>
            </div>
        </div><!--/container-->
    </div>
  </body>
</html>

Y el resultado es ...

El lapso de 4 div sin canal se mantendrá extendido para el paisaje de tableta pequeña (800x600). Cualquier tamaño más pequeño que eso colapsará los 4 divs y se apilará verticalmente. Por supuesto, tendrá que ajustarlo para que se ajuste a sus necesidades.

Answer 6

La forma más sencilla de eliminar el relleno y el margen es con CSS simple.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>

Answer 7

Para agregar a Skelly''s Bootstrap 3 sin canal de respuesta arriba ( https://.com/a/21282059/662883 )

Agregue lo siguiente para evitar canaletas en una fila que contiene solo una columna (útil cuando se usa el ajuste de columnas: http://getbootstrap.com/css/#grid-example-wrapping ):

.row.no-gutter [class*=''col-'']:only-child,
.row.no-gutter [class*=''col-'']:only-child
{
    padding-right: 0;
    padding-left: 0;
}

Answer 8

Actualización 2018

Para Bootstrap 3 , es mucho más fácil. Bootstrap 3 ahora usa relleno en lugar de márgenes para crear el "canal".

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*=''col-'']:not(:first-child),
.row.no-gutter [class*=''col-'']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

A continuación, solo agregue no-gutter a las filas donde se va a eliminar el espaciado:

  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>

Demostración: http://bootply.com/107708

Bootstrap 4 (no se necesita CSS adicional)

Bootstrap 4 incluye una clase no-gutters que se puede aplicar a toda la row :

http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

También hay nuevas utilidades de espaciado que permiten el control de relleno / márgenes. Así que esto se puede usar para cambiar el relleno (canaleta) de una sola columna (es decir: <div class="col-3 pl-0"></div> ) establece padding-left:0; en la columna, o use px-0 para eliminar el relleno izquierdo y derecho (eje x).

Answer 9

Para Bootstrap 3.0 o superior, mira esta respuesta

Solo estamos viendo la clase .span1 aquí (una columna en una grilla de 12 de ancho), pero puede lograr lo que desea eliminando el margen izquierdo de:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

A continuación, cambie .row-fluid .span1 ''s ancho para que sea igual a 100% dividido por 12 columnas (8.3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

Puede hacer esto agregando una clase adicional que le permita dejar intacto el sistema de grilla base:

.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }

<div class="row-fluid show-grid">
    <div class="span1NoGutter">1</div>
</div>

También podría repetir este patrón para todas las demás columnas:

.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }

* EDITAR (insistiendo en usar la grilla predeterminada)
Si el sistema de cuadrícula predeterminado es un requisito, tiene un ancho predeterminado de 940px (es decir, las clases .container y .span12); por lo tanto, en términos más simples, querría dividir 940 entre 12. Eso equivale a 12 contenedores de 78.33333px de ancho.

Así que la línea 339 de bootstrap.css podría editarse así:

.span1 { width:78.33333px; margin-left:0 }
  or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)