Javascript React引导<；世界其他地区>；不正确的高度

我试图创建一个两列布局，左列具有固定高度，右列包含另一个具有多行的网格

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

以下是输出：

这是我的密码：

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

类应用程序扩展组件{
render（）{
返回(
列1
我是一个200像素高的列
第二栏我为什么这么高？？？
我太低了！
我也是！
);
}
}

还有小提琴：

将

xsOffset={2}

替换为

xs={10}

为什么会这样？ 根据Bootstrap网格系统，默认情况下，带有伪类

.row:：before

的相邻

具有

显示：table

必须深入研究引导CSS；）

因此，它将强制相邻的

具有相同的高度

在您的例子中，不需要给出偏移量，用

xs={10}

替换

xsOffset={2}

更方便

因此，它将工作良好，因为它是标准的引导方式

var{Grid，Row，Col}=ReactBootstrap
类应用程序扩展了React.Component{
render（）{
返回(
列1
我是一个200像素高的列
第二栏我为什么这么高？？？
我太低了！
我也是！
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

这很有效！谢谢我的方式有什么问题？我的想法是在左边有一个xs=2列，在右边偏移2的列中有一堆东西。为什么这会导致行的大小错误？请检查原因谢谢您的解释！