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

Posted 2023-02-22

【中文标题】React-Bootstrap 导致左侧和右侧的边距

【英文标题】：React-Bootstrap causing margins on left and right side

【发布时间】：2018-02-19 10:45:34

【问题描述】：

我在我的 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 导入，则引导样式不起作用。

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

【问题讨论】：

将Row组件padding-left和padding-right设置为0应该可以解决问题

@bennygenel 我试过但没用。

您确定您应用的样式有效吗？有时你需要使用!important 来覆盖引导样式

@bennygenel 没有任何效果。我试过!important，但也没有用。我将更新问题将链接到 CodePen。

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

【参考方案1】：

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

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

grid

margin: 0;

另一种方法是：

grid

padding-right: 0px;
padding-left: 0px;

【讨论】：

@AmanshuKataria - 导航栏还有其他 div 吗？能否请您发布完整的代码？

那么css是什么？你可以访问它的css文件吗？如果是这样，请为其粘贴 css

【参考方案2】：

我用一个干净的 react 应用测试了你的代码。之前的建议是错误的。您需要将Grid组件@​​987654323@和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.方式 您可以通过覆盖组件类名来全局更改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;

【讨论】：

我刚刚注意到这会创建一个水平滚动。 res.cloudinary.com/amanshu-kataria/image/upload/v1505152961/…

可能与左右边距为-15px的行有关

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

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

@AmanshuKataria 实际上我错了。我再次测试了代码并为 Grid 设置填充不是要走的路，因为 Col 组件会创建水平滚动。您实际上应该为 Col 组件设置 padding 0。如果将 Grid 的 paddings 设置为 0，Rows margins 设置为 0，Cols paddings 设置为 0，那么一切都很完美你是否使用 Chrome Dev Tools 轻松测试 css？

【参考方案3】：

上面的答案是多余的。这真的没那么复杂。根据Grid 上的官方 React Bootstrap 文档，可以应用 fluid 属性。以下是流体的说明：

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

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

<Grid fluid=true>

【参考方案4】：

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

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

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

【参考方案5】：

对我来说最正确的答案是

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

【参考方案6】：

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

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

评论。 bootstrap 的 css 被导入到我的 _App.js 中

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

【讨论】：

要添加的另一件事是使用<Row className="g-0"> ... </Row>，其中g-0 删除Cols 之间的排水沟。

【参考方案7】：

2021 我在反应引导方面遇到了同样的问题，我解决它的方式是通过消除排水沟。 Bootstrap 5 类在这种情况下可以完美运行。

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

注意，不仅要给父Container加上gx-0，还要给子Row加上gx-0，否则不行。 p>