React-Bootstrap在左侧和右侧造成边距 [英] React-Bootstrap causing margins on left and right side

问题描述

我在React应用程序中使用

如果我从< Col> xs和md c $ c>然后问题解决。

导入twitter-bootstrap导致了此问题。如果我删除了twitter-bootstrap导入，则引导程序样式将不起作用。

此问题与 Twitter-Bootstrap的问题，但我无法在React-Bootstrap中修复它。

解决方案

我使用干净的react应用测试了您的代码。先前的建议是错误的。您需要设置 Grid 组件 padding-left 和 padding-right 为0。

更新：仅设置 Grid 是不够的。还需要将页边距设置为行的0，将边距设置为 Col 的0。

您可以通过3种方法来实现。

1。方式：为 Grid ， Row 和 Col

 <网格流体样式= {{paddingLeft：0，paddingRight：0}}> 
< Row style = {{margin-left：0，margin-right：0}}> 
< Col style = {{padding-left：0，padding-right：0}}> 
 ... 
< / Col> 
< / Row> 
< / Grid> 
  

OR

  const样式= {
网格：{
 paddingLeft：0，
 paddingRight：0 
}，
 row：{ 
 margin左：0，
 marginRight：0 
}，
 col：{
 paddingLeft：0，
 paddingRight：0 
} 
}; 
<网格流体样式= {styles.grid}> 
< Row style = {styles.row}> 
< Col style = {styles.col}> 
 ... 
< / Col> 
< / Row> 
< / Grid> 
  

2。方式：添加自定义类名称

  // 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。方式：您可以全局更改网格，行和颜色通过覆盖组件className

  // App.css 
 
 div.container- Fluid {
 padding-left：0; 
 padding-right：0; 
} 
 
 div.row {
 margin-right：0px; 
左边距空白：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; 
} 
  

I'm using React-Bootstrap in my React app. It is causing margin on the left and right side. I'm using the following code:

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>

I'm getting the following output:

If I remove xs and md from <Col> then the issue gets fixed.

Importing twitter-bootstrap is causing this issue. If I remove the twitter-bootstrap import then the bootstrap styling doesn't work.

This issue is same as Twitter-Bootstrap's issue, but I'm not able to fix it in React-Bootstrap.

解决方案

I tested your code with a clean react app. The previous suggestions were wrong. You need to set Grid components padding-left and padding-right to 0.

UPDATE: Just setting Grid is not enough. Also need to set margins to 0 of Row and paddings to 0 of Col.

You can achieve this by 3 ways.

1. Way: Add inline style for Grid, Row and 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>

OR

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. WAY: Add a custom class name

//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 You can globally change Grid, Row and Col components behaviour by overriding components 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;
}

这篇关于React-Bootstrap在左侧和右侧造成边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！