twitter-bootstrap React-Bootstrap 导致左侧和右侧的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46151515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Bootstrap causing margins on left and right side
提问by Amanshu Kataria
I'm using React-Bootstrapin my React app. It is causing margin on the left and right side. I'm using the following code:
我在我的 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>
I'm getting the following output:
我得到以下输出：
If I remove xs and mdfrom <Col>then the issue gets fixed.
如果我xs and md从中删除，<Col>那么问题就会得到解决。
Importing twitter-bootstrap is causing this issue. If I remove the twitter-bootstrap import then the bootstrap styling doesn't work.
导入 twitter-bootstrap 会导致此问题。如果我删除 twitter-bootstrap 导入，则引导程序样式不起作用。
This issue is same as Twitter-Bootstrap's issue, but I'm not able to fix it in React-Bootstrap.
此问题与Twitter-Bootstrap 的问题相同，但我无法在 React-Bootstrap 中修复它。
回答by bennygenel
I tested your code with a clean react app. The previous suggestions were wrong. You need to set Gridcomponents padding-leftand padding-rightto 0.
我用一个干净的反应应用程序测试了你的代码。之前的建议是错误的。您需要将Grid组件padding-left和设置padding-right为 0。
UPDATE:Just setting Gridis not enough. Also need to set margins to 0 of Rowand paddings to 0 of Col.
更新：仅仅设置Grid是不够的。还需要将边距设置为 0 ofRow并将填充设置为 0 of Col。
You can achieve this by 3 ways.
您可以通过 3 种方式实现这一目标。
1. Way:Add inline style for Grid, Rowand Col
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>
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
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. WAYYou can globally change Grid, Rowand Colcomponents behaviour by overriding components className
3. WAY可以全局的变化Grid，Row并Col通过覆盖部件组件行为的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;
}
回答by Jason Rice
The answer above is overkill. This really isn't that complicated. According to the official React Bootstrap documentation on Gridthe fluidproperty can be applied. Here's the description for fluid:
上面的答案是矫枉过正。这真的没有那么复杂。根据官方的产生反应引导文档网格的流体可以应用性能。这是流体的描述：
Turn any fixed-width grid layout into a full-width layout by this property. Adds container-fluid class.
通过此属性将任何固定宽度的网格布局转换为全角布局。添加容器流体类。
Here's what I did and it works perfectly:
这是我所做的，它完美地工作：
<Grid fluid={true}>
回答by ssc
Really late to the party here; I just wanted to add that in Bootstrap 4, I was able to remove the column margins by adding fluid="true"to the Containerand noGuttersto the Row, e.g.
这里的派对真的很晚了；我只是想在 Bootstrap 4 中添加它，我能够通过添加fluid="true"到Container和noGutters来删除列边距Row，例如
<Grid fluid="true">
<Row noGutters>
<Col>
{/* ... <contents> ... */}
</Col>
</Row>
</Grid>
Adding fluidonly does not seem to be enough. Sample code is untested.
fluid仅添加似乎还不够。示例代码未经测试。
回答by DreamRJ
EDIT: I changed the row to grid. if that fails, then you need to post more code. is there any other div containers the navbar is inside?
编辑：我将行更改为网格。如果失败，那么您需要发布更多代码。导航栏里面还有其他 div 容器吗？
there is a few ways to do this:
有几种方法可以做到这一点：
grid
{
margin: 0;
}
another way is:
另一种方法是：
grid
{
padding-right: 0px;
padding-left: 0px;
}
