React-Bootstrap 导致左右边距
React-Bootstrap causing margins on left and right side
我在我的 React 应用程序中使用 React-Bootstrap。它在左侧和右侧造成边距。我正在使用以下代码:
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>
我得到以下输出:
如果我从 <Col>
中删除 xs and md
,问题就会得到解决。
导入 twitter-bootstrap 导致此问题。如果我删除 twitter-bootstrap 导入,那么 bootstrap 样式将不起作用。
此问题与 相同,但我无法在 React-Bootstrap.
中修复它
编辑:我将行更改为网格。如果失败,那么您需要 post 更多代码。导航栏里面还有其他 div 容器吗?
有几种方法可以做到这一点:
grid
{
margin: 0;
}
另一种方式是:
grid
{
padding-right: 0px;
padding-left: 0px;
}
我用干净的 React 应用测试了你的代码。之前的建议是错误的。您需要将 Grid
组件 padding-left
和 padding-right
设置为 0.
更新: 仅设置 Grid
是不够的。还需要将边距设置为 Row
的 0,将填充设置为 Col
的 0。
您可以通过 3 种方式实现。
1.方式:为Grid
、Row
和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>
或
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。方式: 添加自定义 class 名称
//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 您可以通过覆盖组件 className
全局更改 Grid
、Row
和 Col
组件行为
//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;
}
上面的回答太过分了。这真的没有那么复杂。根据关于 Grid 的官方 React Bootstrap 文档,可以应用 fluid 属性。这是 fluid:
的描述
通过这个属性将任何固定宽度的网格布局变成全宽布局。
添加容器流体 class.
这是我所做的并且效果很好:
<Grid fluid={true}>
这里的聚会真的迟到了;我只是想在 Bootstrap 4 中添加,我可以通过将 fluid="true"
添加到 Container
并将 noGutters
添加到 Row
来删除列边距,例如
<Grid fluid="true">
<Row noGutters>
<Col>
{/* ... <contents> ... */}
</Col>
</Row>
</Grid>
仅添加fluid
似乎还不够。示例代码未经测试。
最适合我的正确答案是
<Container fluid style={{paddingLeft: '0px', paddingRight: '0px'}}>
<Row noGutters>
<COl>
//Whatever your content
</COl>
</Row>
</Container>
我使用了 react-bootstrap 和 next.js。我想出了一个简短的解决方案:
<Container fluid className="p-0">
...
</Container>
评论。 bootstrap 的 css 被导入到我的 _App.js
import 'bootstrap/dist/css/bootstrap.min.css';
2021
我在 React bootstrap 中遇到了同样的问题,我解决它的方法是使排水沟无效。 Bootstrap 5 类 在这种情况下工作得很好。
<Container fluid className='gx-0'>
<Row className='gx-0'>
<Col>
<div>Content</div>
</Col>
</Row>
</Container>
注意,不仅父Container,还需要将gx-0添加到子Row,否则它不会工作。
我在我的 React 应用程序中使用 React-Bootstrap。它在左侧和右侧造成边距。我正在使用以下代码:
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>
我得到以下输出:
如果我从 <Col>
中删除 xs and md
,问题就会得到解决。
导入 twitter-bootstrap 导致此问题。如果我删除 twitter-bootstrap 导入,那么 bootstrap 样式将不起作用。
此问题与
编辑:我将行更改为网格。如果失败,那么您需要 post 更多代码。导航栏里面还有其他 div 容器吗?
有几种方法可以做到这一点:
grid
{
margin: 0;
}
另一种方式是:
grid
{
padding-right: 0px;
padding-left: 0px;
}
我用干净的 React 应用测试了你的代码。之前的建议是错误的。您需要将 Grid
组件 padding-left
和 padding-right
设置为 0.
更新: 仅设置 Grid
是不够的。还需要将边距设置为 Row
的 0,将填充设置为 Col
的 0。
您可以通过 3 种方式实现。
1.方式:为Grid
、Row
和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>
或
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。方式: 添加自定义 class 名称
//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 您可以通过覆盖组件 className
全局更改Grid
、Row
和 Col
组件行为
//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;
}
上面的回答太过分了。这真的没有那么复杂。根据关于 Grid 的官方 React Bootstrap 文档,可以应用 fluid 属性。这是 fluid:
的描述通过这个属性将任何固定宽度的网格布局变成全宽布局。 添加容器流体 class.
这是我所做的并且效果很好:
<Grid fluid={true}>
这里的聚会真的迟到了;我只是想在 Bootstrap 4 中添加,我可以通过将 fluid="true"
添加到 Container
并将 noGutters
添加到 Row
来删除列边距,例如
<Grid fluid="true">
<Row noGutters>
<Col>
{/* ... <contents> ... */}
</Col>
</Row>
</Grid>
仅添加fluid
似乎还不够。示例代码未经测试。
最适合我的正确答案是
<Container fluid style={{paddingLeft: '0px', paddingRight: '0px'}}>
<Row noGutters>
<COl>
//Whatever your content
</COl>
</Row>
</Container>
我使用了 react-bootstrap 和 next.js。我想出了一个简短的解决方案:
<Container fluid className="p-0">
...
</Container>
评论。 bootstrap 的 css 被导入到我的 _App.js
import 'bootstrap/dist/css/bootstrap.min.css';
2021
我在 React bootstrap 中遇到了同样的问题,我解决它的方法是使排水沟无效。 Bootstrap 5 类 在这种情况下工作得很好。
<Container fluid className='gx-0'>
<Row className='gx-0'>
<Col>
<div>Content</div>
</Col>
</Row>
</Container>
注意,不仅父Container,还需要将gx-0添加到子Row,否则它不会工作。