React-Bootstrap causando márgenes en el lado izquierdo y derecho

Solución:

Probé tu código con una aplicación de reacción limpia. Las sugerencias anteriores estaban equivocadas. Necesitas configurar Grid componentes padding-left y padding-right a 0.

ACTUALIZAR: Solo estableciendo Grid no es suficiente. También es necesario establecer los márgenes en 0 de Row y acolchados a 0 de Col.

Puede lograr esto de 3 maneras.

1. Camino: Agregar estilo en línea para Grid, Row y Col

<Grid fluid style={{ paddingLeft: 0, paddingRight: 0 }}>
    <Row style={{ margin-left: 0, margin-right: 0 }}>
        <Col style={{ padding-left: 0, padding-right: 0 }}>
            ...
        </Col>
    </Row>
</Grid>

O

const styles = {
    grid: {
        paddingLeft: 0,
        paddingRight: 0
    },
    row: {
        marginLeft: 0,
        marginRight: 0
    },
    col: {
        paddingLeft: 0,
        paddingRight: 0
    }
};
<Grid fluid style={styles.grid}>
    <Row style={styles.row}>
        <Col style={styles.col}>
            ...
        </Col>
    </Row>
</Grid>

2 VÍAS: Agrega un nombre de clase personalizado

//App.css
div.noPadding {
    padding-left: 0;
    padding-right: 0;
}

div.noMargin {
    margin-left: 0;
    margin-right: 0;
}

//App.js
import '/path/to/your/App.css';

render() {
    return (
        <Grid fluid className="noPadding">
            <Row className="noMargin">
                <Col className="noPadding">
                    ...
                </Col>
            </Row>
        </Grid>
    )
}

3. MANERA Puedes cambiar globalmente Grid, Row y Col comportamiento de los componentes anulando los componentes className

//App.css

div.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

div.row {
    margin-right: 0px;
    margin-left: 0px
}

div.col-lg-1,div.col-lg-10,div.col-lg-11,div.col-lg-12,div.col-lg-2,div.col-lg-3,div.col-lg-4,div.col-lg-5,div.col-lg-6,div.col-lg-7,div.col-lg-8,div.col-lg-9,
div.col-md-1,div.col-md-10,div.col-md-11,div.col-md-12,div.col-md-2,div.col-md-3,div.col-md-4,div.col-md-5,div.col-md-6,div.col-md-7,div.col-md-8,div.col-md-9,
div.col-sm-1,div.col-sm-10,div.col-sm-11,div.col-sm-12,div.col-sm-2,div.col-sm-3,div.col-sm-4,div.col-sm-5,div.col-sm-6,div.col-sm-7,div.col-sm-8,div.col-sm-9,
div.col-xs-1,div.col-xs-10,div.col-xs-11,div.col-xs-12,div.col-xs-2,div.col-xs-3,div.col-xs-4,div.col-xs-5,div.col-xs-6,div.col-xs-7,div.col-xs-8,div.col-xs-9 {
    padding-left: 0;
    padding-right: 0;
}

La respuesta anterior es excesiva. Esto realmente no es tan complicado. De acuerdo con la documentación oficial de React Bootstrap en Grid, líquido se puede aplicar la propiedad. Aquí está la descripción de líquido:

Convierta cualquier diseño de cuadrícula de ancho fijo en un diseño de ancho completo con esta propiedad. Agrega clase de fluido de contenedor.

Esto es lo que hice y funciona perfectamente:

<Grid fluid={true}>

Realmente tarde para la fiesta aquí; Solo quería agregar que en Bootstrap 4, pude eliminar los márgenes de la columna agregando fluid="true" al Container y noGutters al Row, p.ej

<Grid fluid="true">
  <Row noGutters>
    <Col>
      {/* ... <contents> ... */}
    </Col>
  </Row>
</Grid>

Añadiendo fluid solo no parece ser suficiente. El código de muestra no está probado.

---

---

Utiliza Nuestro Buscador