Question

我在我的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>

我得到以下输出：

如果我从xs and md删除<Col>，则问题会得到解决。

导入twitter-bootstrap会导致此问题。如果我删除了twitter-bootstrap导入，那么bootstrap样式就不起作用了。

此问题与Twitter-Bootstrap's issue相同，但我无法在React-Bootstrap中修复此问题。

Answer 1

我使用干净的反应应用程序测试了您的代码。以前的建议是错误的。您需要将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。方式：添加自定义类名

//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;
}

Answer 2

在这里参加聚会真的很晚；我只是想在Bootstrap 4中添加，我能够通过将fluid="true"添加到Container并将noGutters添加到Row来删除列边距，例如

<Grid fluid="true">
  <Row noGutters>
    <Col>
      {/* ... <contents> ... */}
    </Col>
  </Row>
</Grid>

仅添加fluid似乎还不够。示例代码未经测试。

Answer 3

以上答案过于矫kill过正。这真的没有那么复杂。根据{{3}}上的官方React Bootstrap文档，可以应用 fluid 属性。这是流体的描述：

通过此属性将任何固定宽度的网格布局转换为全角布局。添加容器流体类。

这就是我所做的，并且效果很好：

<Grid fluid={true}>

Answer 4

编辑：我将行更改为网格。如果失败，那么你需要发布更多代码。导航栏里面还有其他任何div容器吗？

有几种方法可以做到这一点：

grid
{
margin: 0;
}

另一种方式是：

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

Answer 5

最适合我的答案是

<Container fluid style={{paddingLeft: '0px', paddingRight: '0px'}}>
<Row noGutters>
<COl>
//Whatever your content
</COl>
</Row>
</Container>

Answer 6

我在next.js中使用react-bootstrap。我想出了一个简短的解决方案：

<Container fluid className="p-0">
    ...
</Container>

评论。引导程序的css导入了我的_App.js

import 'bootstrap/dist/css/bootstrap.min.css';

React-Bootstrap导致左侧和右侧的边距

6 个答案: