React-Bootstrap导致左右两侧出现边距

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>

我得到以下输出： 如果我从<Col>中删除xs和md，问题就会得到解决。

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

这个问题与Twitter-Bootstrap的问题相同，但我无法在React-Bootstrap中解决它。

- Amanshu Kataria

---

将“Row”组件的“padding-left”和“padding-right”设为0应该可以解决问题。 - bennygenel

@bennygenel 我尝试了，但是没有成功。 - Amanshu Kataria

你确定你应用的样式有效吗？有时需要使用 ！important 来覆盖 Bootstrap 样式。 - bennygenel

@bennygenel 什么都没用。我试过使用!important，但那也不起作用。我会更新问题并附上CodePen的链接。 - Amanshu Kataria

@bennygenel请检查更新后的问题。 - Amanshu Kataria

Answer 1

我用一个干净的react应用程序测试了你的代码。之前的建议是错误的。您需要将Grid组件的padding-left和padding-right设置为0。

更新：仅设置Grid是不够的。还需要将Row的边距设置为0，并将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. 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;
}

- bennygenel

---

我刚刚注意到这会创建一个水平滚动条。http://res.cloudinary.com/amanshu-kataria/image/upload/v1505152961/Capture2_a1eewa.png - Amanshu Kataria

可能与行具有左右边距-15px有关。 - bennygenel

设置 overflow: hidden 解决了问题。这是正确的解决方法吗？ - Amanshu Kataria

在我看来，并不是因为这意味着窗口右侧仍有内容。你应该找出超出窗口宽度的内容并修复它。 - bennygenel

@AmanshuKataria 实际上我搞错了。我再次测试了代码，设置网格的填充不是正确的方法，因为这样Col组件会创建水平滚动条。你应该将Col组件的填充设置为0。如果你将Grid的填充设置为0，行的边距设置为0，列的填充设置为0，一切都会完美地呈现。你是否使用Chrome Dev Tools轻松测试CSS？ - bennygenel

我试过了，而且它有效。请您也更新您的答案。 - Amanshu Kataria

Answer 2

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

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

备注：在我的 _App.js 文件中已导入了 Bootstrap 的 CSS。

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

- farynaa

---

另外需要补充的是使用<Row className="g-0"> ... </Row>，其中g-0可以去除Col之间的间距。 - Scre

Answer 3

以上回答过于复杂。这并不是很复杂的问题。根据React Bootstrap文档中有关 Grid 的官方说明，可以应用 fluid 属性。以下是fluid的描述： 通过此属性将任何固定宽度网格布局转换为全宽度布局。添加 container-fluid 类。 这是我所做的，它完美地工作：

<Grid fluid={true}>

- Jason Rice

Answer 4

2021

我在使用React Bootstrap时遇到了同样的问题，解决方法是将gutters设置为null。在这种情况下，Bootstrap 5类可以完美地使用。

   <Container fluid className='gx-0'>
    <Row className='gx-0'>
      <Col>
        <div>Content</div>
      </Col>
    </Row>
   </Container>

请注意，您不仅需要将gx-0添加到父级容器中，还需要添加到子级行中，否则它将无法正常工作。

- Blagovest Georgiev

Answer 5

很晚才了解这个问题；我只想补充一点，在Bootstrap 4中，我能够通过向Container添加fluid="true"和向Row添加noGutters来删除列边距，例如：

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

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

- ssc

Answer 6

我觉得对我来说最正确的答案是：

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

- Seenu Aravind Raj

Answer 7

编辑：我将行更改为网格。如果失败了，那么您需要发布更多的代码。导航栏内是否有其他div容器？

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

grid
{
margin: 0;
}

另一种方法是：

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

- DreamRJ

---

@AmanshuKataria - 导航栏还有其他的<div>吗？你能发布完整的代码吗？ - DreamRJ

那么CSS是什么？你有它的CSS文件吗？如果有，请将其CSS粘贴过来。 - DreamRJ