Question

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

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

这是输出：

这是我的代码：

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网格系统，默认情况下，具有伪类<div>的相邻.row::before具有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

React-Bootstrap <row>高度不正确

1 个答案:

为什么会这样？