Сетка React Bootstrap, охватывающая всю ширину панели вкладок

У меня есть компонент реакции, выкладывающий сетку других компонентов на панели вкладок, все из react-bootstrap и содержащиеся в div, в котором есть красивый центрированный, мягкий контейнер начальной загрузки. К сожалению, сетка на вкладке, похоже, считает, что она должна простираться до правого края экрана. Как я могу убедиться, что он находится в пределах ширины родительского div?

Вот суть кода:

render() {
    return (
    <div class="container">
        <Tabs>
          <Tab>
            <Grid>
              <Row>
                <Col md={12}>
                  <Panel>
                    Hi
                  </Panel>
                </Col>
             </Row>
          </Grid>
        </Tab>
      </Tabs>
    </div>           
    );
  }


react-bootstrap
person edmofro    schedule 01.04.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Попробуйте использовать плавную опору Grid, чтобы превратить Grid из макета фиксированной ширины в макет полной ширины. См.: https://react-bootstrap.github.io/components.html#grid : Реквизит

render() {
    return (
    <div class="container">
        <Tabs>
          <Tab>
            <Grid fluid={true}>
              <Row>
                <Col md={12}>
                  <Panel>
                    Hi
                  </Panel>
                </Col>
             </Row>
          </Grid>
        </Tab>
      </Tabs>
    </div>           
    );
  }
person Martin    schedule 18.05.2016