web-dev-qa-db-ja.com

React-Bootstrapにより左側と右側にマージンが発生する

私は React-Bootstrap を私の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>

次の出力を取得しています： enter image description here

xs and mdを<Col>から削除すると、問題が解決します。

Twitterブートストラップをインポートすると、この問題が発生します。 Twitter-bootstrapインポートを削除すると、bootstrapスタイリングが機能しなくなります。

この問題は Twitter-Bootstrapの問題 と同じですが、React-Bootstrapで修正することはできません。

javascriptcsstwitter-bootstrapreactjsreact-bootstrap
9
Amanshu Kataria

クリーンリアクションアプリでコードをテストしました。以前の提案は間違っていました。 Gridコンポーネントpadding-leftおよびpadding-rightを0に設定する必要があります。

PDATE：Gridを設定するだけでは不十分です。また、マージンをRowの0に、パディングをColの0に設定する必要があります。

これは3つの方法で実現できます。

1。Way：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。WAY：カスタムクラス名を追加

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

。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;
}
10
bennygenel

上記の答えはやり過ぎです。これは本当にそれほど複雑ではありません。公式によるとReact Bootstrapに関するドキュメント Grid （fluidプロパティを適用できます。fluidの説明は次のとおりです。

このプロパティにより、固定幅のグリッドレイアウトを全幅レイアウトに変更します。コンテナ流体クラスを追加します。

これが私がやったことであり、それは完全に機能します：

<Grid fluid={true}>
3
Jason Rice

ここのパーティーには本当に遅れました。これをBootstrap 4に追加したかっただけで、ContainerとnoGuttersにfluid="true"を追加してRow、例えば.

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

fluidを追加するだけでは不十分のようです。サンプルコードはテストされていません。

0
ssc

編集：行をグリッドに変更しました。それが失敗した場合は、さらにコードを投稿する必要があります。 navbarが中にある他のdivコンテナーはありますか？

これにはいくつかの方法があります。

grid
{
margin: 0;
}

別の方法は：

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