web-dev-qa-db-fra.com

React-Bootstrap causant des marges à gauche et à droite

J'utilise React-Bootstrap dans mon application React. Cela cause une marge à gauche et à droite. J'utilise le code suivant:

import React, { Component } from "react";
import "react-bootstrap/dist/react-bootstrap.min.js";
import "bootstrap/dist/css/bootstrap.min.css";
import { Grid, Row, Col } from "react-bootstrap";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";

<Grid fluid>
   <Row>
      <Col xs={12} md={12}>
        <AppBar title="Title"
         iconClassNameRight="muidocs-icon-navigation-expand-more"/>
       </Col>
   </Row>
   <Row>
       <Col xs={4} md={4}>
          <h1>Hello</h1>
       </Col>
       <Col xs={8} md={8} >
          <h1>Hello World!</h1>
       </Col>
   </Row>
</Grid>

Je reçois le résultat suivant:  enter image description here

Si je supprime xs and md de <Col>, le problème est résolu.

L'importation de Twitter-bootstrap est à l'origine de ce problème. Si je supprime l'import Twitter-bootstrap, le style bootstrap ne fonctionne pas.

Ce problème est identique à celui de le problème de Twitter-Bootstrap , mais je ne parviens pas à le résoudre dans React-Bootstrap.

javascriptcsstwitter-bootstrapreactjsreact-bootstrap
4
Amanshu Kataria

J'ai testé votre code avec une application de réactivité propre. Les suggestions précédentes étaient fausses. Vous devez définir Grid composants padding-left et padding-right à 0.

UPDATE: Il ne suffit pas de définir Grid. Vous devez également définir les marges sur 0 de Row et les marges de 0 sur Col.

Vous pouvez y parvenir de trois manières.

1. Manière: Ajouter un style en ligne pour Grid, Row et 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>

OU

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. MANIER: Ajouter un nom de classe personnalisé

//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. WAY Vous pouvez modifier globalement le comportement des composants Grid, Row et Col en redéfinissant les composants 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;
}
4
bennygenel

EDIT: J'ai changé la ligne en grille. si cela échoue, vous devez poster plus de code. y a-t-il d'autres conteneurs div dans lesquels la barre de navigation est à l'intérieur? 

il y a plusieurs façons de le faire:

grid
{
margin: 0;
}

une autre façon est:

grid
{
padding-right: 0px;
padding-left: 0px;
}
0
DreamRJ

La réponse ci-dessus est exagérée. Ce n'est vraiment pas si compliqué. Selon la documentation officielle de React Bootstrap sur Grid , la propriété fluid peut être appliquée. Voici la description de fluid :

Transformez toute disposition de grille de largeur fixe en disposition de largeur entière avec cette propriété. Ajoute la classe de fluide de conteneur.

Voici ce que j'ai fait et cela fonctionne parfaitement:

<Grid fluid={true}>
0
Jason Rice