React-Bootstrap <Row> 高度不正确

Question

我正在尝试创建一个两列布局，左列固定高度，右列包含另一个多行网格。

但是，第二列的第一行始终是左列的高度。

这是输出：

这是我的代码：

class App extends Component {
  render() {
    return (
      <div>
        <Grid fluid >
          <Row>
            <Col xs={2} style={{ padding: '0px', backgroundColor: 'lightblue', height: '200px' }}>
        Column 1 <br/>I am a 200 px tall column</Col>
            <Col xsOffset={2}>
              <Grid>
                <Row style={{backgroundColor: 'red'}}>
                 Column 2 <br/> Why am I so tall???
                </Row>
                <Row style={{backgroundColor: 'green'}}>
                 I am too far down!
                </Row>
                <Row style={{backgroundColor: 'lightgray'}}>
                 Me, too!
                </Row>
              </Grid>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

还有一个小提琴：https://jsfiddle.net/TimoF/dwLhb1fz/

Answer 1

将xsOffset={2} 替换为xs={10}

为什么会这样？

根据 Bootstrap Grid System，默认情况下，与伪类 .row::before 相邻的 <div> 具有 display:table。

必须深入研究 Bootstrap CSS ;)

因此它将强制相邻的<div> 具有相同的高度。 Check this

在你的情况下，没有必要给出偏移量，将xsOffset={2}替换为xs={10}更方便。

因此它可以正常工作，因为它是标准 Bootstrap 的方式。

var { Grid, Row, Col } = ReactBootstrap

class App extends React.Component {
  render() {
    return (
        <Grid fluid >
          <Row>
            <Col xs={2} style={{ backgroundColor: 'lightblue', height: '200px' }}>
            Column 1 <br/>I am a 200 px tall column</Col>
            <Col xs={10}>
             <Row>
              <Grid>
                <Row style={{backgroundColor: 'red',height:'auto'}}>
                  Column 2 <br/> Why am I so tall???
                </Row>
                <Row style={{backgroundColor: 'green'}}>
                  I am too far down!
                </Row>
                <Row style={{backgroundColor: 'lightgray'}}>
                  Me, too!
                </Row>
              </Grid>
             </Row>
            </Col>
          </Row>
        </Grid>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);

<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Check this Fiddle