html - examples - class row bootstrap

Twitter Bootstrap 3 Eliminación del margen DERECHO y el relleno en una fila y col-12

Question

Estoy usando la fuente Twitter Bootstrap 3.0 LESS en mi proyecto Asp.Net MVC 5. Uso una barra de navegación superior ( como se indica aquí ) y luego algunas filas más en la página de diseño.

Uso lo siguiente para que las filas tomen un ancho de página del 100%:

<div class="row">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

Pero esto agrega un relleno adicional a la derecha de cada fila. Esto también agrega una barra de desplazamiento horizontal a la página y un canal vertical en blanco a lo largo de la página es visible cuando se desplaza la página a su derecha.

Al eliminar el margen derecho de cada fila y el relleno derecho de todos los col-md-12 se corrige el diseño. Sin embargo, no creo que esta sea la forma correcta de hacerlo.

¿Alguna idea de cómo eliminar el margen y el relleno innecesarios a la derecha de una vez por todas, a lo largo del bootstrap.css resultante?

Answer 1

Como se mencionó anteriormente, lo primero que debe hacer es tener clases de filas y contenedores coincidentes:

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

Para eliminar ese relleno, podrías usar un css así:

div.container.tight {
    padding: 0;
}

div.container.tight > .row-fluid {
    padding: 0;
}

Agregué una clase ajustada al contenedor para restringir la remoción de este relleno a solo este lugar (o cualquier otro contenedor que esté apretado ). Hacerlo globalmente podría interferir con otras cosas como las barras de navegación potencialmente.

Answer 2

El código de arranque original es

.row{
   margin-right:-15px;
   margin-left:-15px;
}

Por eso tienes relleno y una barra de desplazamiento.

Así que quieres restablecerlos en 0px pero si es algo que solo quieres una vez, no debes anular el CSS de arranque original. Luego podrás usarlo posteriormente con el comportamiento normal.

Lo que yo haría es agregar otra clase como esta:

<div class="row rowWithFullWidth">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

Entonces con este CSS

.rowWithFullWidth {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

De esa manera, puedes usar .row con el comportamiento normal después.

Answer 3

La forma más fácil de resolver este problema es comentar el relleno izquierdo y derecho de todas las columnas, establecer el relleno izquierdo y derecho en la clase de contenedor en 0 y eliminar un margen negativo de las filas.

Solo comente .row la clase en la línea 691 y en la línea 714 comente el código para el relleno izquierdo y derecho en la clase ^ = "col-".

Eso me funciona a mí:

.container {
     padding-right: 0;
     padding-left: 0; 
     margin-right: auto;
     margin-left: auto;
}

.row {
   /*margin-right: -15px;
    margin-left: -15px;*/
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        position: relative;
        min-height: 1px;
        /*padding-right: 15px;
        padding-left: 15px;*/
}

Answer 4

Puede resolver este problema en Bootstrap 3 mediante:

1. Envuelva su fila en un div con una clase de contenedor o fluido de contenedor y agregue un relleno de 0px.
2. Ocultando el desbordamiento horizontal.

Ejemplo:

Primero envuelve tu fila en un contenedor:

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
 </div>

Luego agregue un relleno de 0px a su clase de contenedor:

.container {
    padding: 0px;
}

Termine ocultando el desbordamiento horizontal:

body {
    overflow-x: hidden;
}

Ta da!

Answer 5

Su problema se debe a NO envolver sus .row s en una clase de .container .

Prueba esto:

<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
    <div class="col-md-12" style="background-color:red;">
       <div style="background-color:yellow;">test test test</div>
    </div>
</div>
</div>

El width:100%; en su .container hará que las filas 100% (rojo). El todavía será un relleno alrededor de su contenido (amarillo). Este relleno es el canal de la cuadrícula, consulte: https://.com/a/19044326/1596547

No, esto no ayuda. El derecho de relleno en col-md-12 todavía prevalece. Busco algo genérico implementado en la fuente .less para cualquier tipo de columna (col - * - 12)!

Todos los col-*-* tienen un relleno de 15px en ambos lados. No hay diferencia entre las clases *-12 excepto que las clases *-12 no tienen un flotante a la izquierda.

Selector css / less para todas tus clases de col-* :

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

Selector de css / less para todas tus col-*-12 clases:

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}

Answer 6

Tendrías que ir al código fuente de los bootstraps, encontrar el selector .row y cambiar el css asociado.

Esto probablemente no es lo que quieres hacer.

En su lugar, recomendaría crear su propio selector para usar para este tipo de fila que desee. Sin embargo, si .row que hacer esto, no podría llamarlo .row porque entraría en conflicto con el selector de .row utilizado por bootstrap. Tendrías que llamarlo algo así como .custom-row