React-Bootstrap <Row> 高度不正确

Posted 2023-02-22

【中文标题】React-Bootstrap <Row> 高度不正确

【英文标题】：React-Bootstrap <Row> incorrect height

【发布时间】：2018-08-26 21:11:35

【问题描述】：

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

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

这是输出：

这是我的代码：

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/

【参考方案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

【讨论】：

这行得通！谢谢！我的方式有什么问题？我的想法是左侧有一个 xs=2 列，而右侧偏移 2 的列中有一堆东西。为什么会导致行的大小错误？

请查原因

感谢您的解释！