导致左侧和右侧的边缘
导致左侧和右侧的边缘
提问于 2017-09-11 08:44:10
我在我的React应用程序中使用反应-自举。这是造成左和右的边缘。我使用以下代码：
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>我得到了以下输出：
如果我从xs and md中删除<Col>，那么问题就会得到解决。
导入twitter引导程序是导致此问题的原因。如果我删除twitter引导导入，那么引导样式就无法工作。
这个问题和推特-Bootstrap的问题是一样的，但是我不能在React中修复它.
回答 7
Stack Overflow用户
回答已采纳
发布于 2017-09-11 15:12:57
我用一个干净的react应用程序测试了你的代码。以前的建议是错误的。您需要将Grid组件、padding-left和padding-right设置为0。
更新：仅仅设置Grid是不够的。还需要将边距设置为Row的0，paddings设置为Col的0。
你可以通过三种方法来实现这一点。
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.方法：添加自定义类名
//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.通过覆盖组件，您可以全局地改变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;
}Stack Overflow用户
发布于 2020-12-12 08:15:36
我使用了react引导和next.js。我想出了一个简短的解决方案：
<Container fluid className="p-0">
...
</Container>备注。引导程序的css是在我的_App.js中导入的
import 'bootstrap/dist/css/bootstrap.min.css';Stack Overflow用户
发布于 2018-06-22 16:24:19
上面的答案是过火了。这真的没那么复杂。根据网格上官方的React文档，流体特性可以应用。以下是对fluid的描述
通过此属性将任何固定宽度的网格布局转换为全宽度布局。添加容器-流体类。
这就是我所做的，它运作得很完美：
<Grid fluid={true}>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46151515
复制相关文章
相似问题
腾讯云开发者
