在选项卡窗格中跨越整个宽度的 React Bootstrap 网格答案

【问题标题】：React Bootstrap grid spanning full width within tab pane在选项卡窗格中跨越整个宽度的 React Bootstrap 网格
【发布时间】：2016-07-20 16:21:51
【问题描述】：

我有一个 react 组件，在选项卡窗格中布置了其他组件的网格，所有这些都来自 react-bootstrap 并包含在一个 div 中，该 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

【解决方案1】：

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

【讨论】：