Question

我有一个react组件在一个选项卡窗格中布置了一个其他组件的网格，所有这些组件都来自react-bootstrap并包含在一个div中，该div具有引导程序的漂亮居中，填充容器。不幸的是，Tab中的Grid似乎认为它应该一直延伸到屏幕的右边缘。我怎样才能确保它在父div的宽度范围内？

这是代码的本质：

＆＃13;

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

＆＃13;

Answer 1

尝试使用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>           
    );
  }

React Bootstrap网格跨越选项卡窗格中的全宽

1 个答案: