Estoy usando Twitter Bootstrap 3.0 MENOS fuente en mi Asp.Net MVC 5 del proyecto. Yo uso una barra de navegación de la parte Superior (que se dan aquí) y, a continuación, cuantas más filas en la página de diseño.

Yo uso la siguiente para las filas para tomar el 100% de ancho de la página:

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

Pero esto añade un extra de relleno a la derecha de cada fila. Esto también se añade una barra de desplazamiento horizontal a la página y una en blanco vertical de canalón en toda la página es visible cuando se desplaza la página a su derecha.

La eliminación de la margen derecha en cada fila y relleno-a la derecha en todos los col-md-12 corrige el diseño. Sin embargo, no me siento esta es la forma correcta de hacerlo.

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

InformationsquelleAutor Santosh | 2013-11-02

6 Comentarios

  1. 27

    El problema es causado por NO envolver el .rows en un .container clase.

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

    La width:100%; en su .container va a hacer que las filas del 100% (rojo). El seguirá siendo un relleno alrededor de su contenido (amarillo). Este relleno es el canalón de la cuadrícula, consulte: https://stackoverflow.com/a/19044326/1596547

    No, esto no ayuda. El acolchado de la derecha en el col-md-12 aún prevalece.
    Busco algo genérico aplicado en .menos de origen para cualquier columna
    tipo (col-*-12)!

    Todos col-*-* tienen un relleno de 15px en ambos lados. No hay ninguna diferencia entre el *-12 de clases, excepto los de la *-12 clases no tienen un flotador a la izquierda.

    css /less selector para todos sus col-* clases:

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

    css /less selector para todos sus col-*-12 clases:

    [class$="-12"]
    {
      padding-left: 0;
      padding-right: 0;
    }
    • No, esto no ayuda. El acolchado de la derecha en el col-md-12 aún prevalece. Busco algo genérico aplicado en .menos fuente de información para cualquier tipo de columna (col-*-12)!
    • Me faltaba la container clase, así que gracias por ayudar! De todos modos no tiene ningún sentido – ¿por qué sólo el lado derecho afectado por un relleno adicional, y no el lado izquierdo? container utiliza el mismo relleno para ambos casos..
    • Esto no debería ser aceptada respuesta, ya que no funciona
  2. 6

    El original código de inicio es

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

    es por eso que usted tiene relleno y una barra de desplazamiento.

    Lo desea restablecer ellos en 0px pero si es algo que sólo se quiere una vez, usted no debe reemplazar el original bootstrap CSS. Entonces usted puede utilizar más adelante con el comportamiento normal.

    Lo que quiero hacer 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, usted puede utilizar .row con el comportamiento normal después.

    • Debe ser rowFullWidth en el html.
  3. 1

    La forma más sencilla de resolver este problema es para comentar a la izquierda y a la derecha el relleno de todas las columnas, a la izquierda y a la derecha de relleno en la clase de contenedor a 0 y para quitar un margen negativo de las filas.

    Comentar .fila de la clase en línea 691, y en la línea 714 comentario código para la izquierda y derecha de relleno en clase^=»col-«.

    Que me funciona:

    .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;*/
    }
  4. 0

    Usted tendría que ir en el mismo código fuente, encontrar el .row selector, y cambiar el css asociado.

    Esto probablemente no es lo que quieres hacer.

    Lugar, me gustaría recomendar la creación de su propio selector de utilizar para este tipo de línea que desea. Si usted fuera a hacer esto, sin embargo, no se podía llamar .row porque entraría en conflicto con .row selector utilizado por bootstrap. Tendrías que llamar algo así como .custom-row

  5. 0

    Como se mencionó anteriormente la primera cosa a hacer es que la coincidencia de contenedor y fila clases:

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

    Para quitar el relleno, usted podría utilizar un poco de css como:

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

    He añadido una clase apretado al recipiente para restringir el uso de este relleno de eliminación a este lugar (o cualquier otro recipiente con apretado en él). Haciendo que todo el mundo podría interferir con otras cosas como navbars potencialmente.

  6. 0

    Puede resolver este problema en Bootstrap 3 por:

    1. Envolver su fila en un div con una clase de contenedor o recipiente de fluido y la adición de un relleno de 0px.
    2. Ocultar la horizontal de desbordamiento.

    Ejemplo:

    Primera envoltura de su fila en un recipiente:

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

    A continuación, agregar un relleno de 0px para su clase de contenedor:

    .container {
    padding: 0px;
    }

    Acabar ocultando la horizontal de desbordamiento:

    body {
    overflow-x: hidden;
    }

    Ta da!

Dejar respuesta

Please enter your comment!
Please enter your name here