React-Bootstrap вызывает поля слева и справа

Я протестировал ваш код с помощью чистого приложения для реагирования. Предыдущие предложения были неверны. Вам нужно установить Grid компоненты padding-left и padding-right на 0.

ОБНОВЛЕНИЕ: просто установить Grid недостаточно. Также необходимо установить поля на 0 для Row и отступы на 0 для Col.

Вы можете добиться этого тремя способами.

<сильный>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, переопределив компоненты className

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

Ответ выше избыточен. Это действительно не так сложно. Согласно официальной документации React Bootstrap на Grid, жидкость свойство может быть применено. Вот описание жидкости:

С помощью этого свойства можно превратить любой макет сетки фиксированной ширины в макет полной ширины. Добавляет класс container-fluid.

Вот что я сделал, и это работает отлично:

<Grid fluid={true}>

Очень поздно на вечеринку здесь; Я просто хотел добавить, что в Bootstrap 4 я смог удалить поля столбца, добавив fluid="true" к Container и noGutters к Row, например.

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

Добавление только fluid кажется недостаточным. Пример кода не тестировался.

Я использовал react-bootstrap с next.js. Я придумал короткое решение:

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

Комментарий. css bootstrap был импортирован в мой _App.js

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

РЕДАКТИРОВАТЬ: я изменил строку на сетку. если это не удается, вам нужно опубликовать больше кода. есть ли другие контейнеры div, внутри которых находится навигационная панель?

есть несколько способов сделать это:

grid
{
margin: 0;
}

другой способ:

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

Самый правильный ответ, который сработал для меня, это

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