Question

我使用了以下使用react-bootstrap的React组件。

const Header = () => (
  <div className="header">
     <Grid>
       <Row>
         <Col md={8}>
           <code>Something</code>
         </Col>

         <Col md={4}>
           <code>something</code>
         </Col>
       </Row>

      </Grid>
    </div>
);

export default Header

两个cols垂直叠加在一起。我的期望是他们应该横向彼此。我在这里做错了什么？

Answer 1

可能的原因：

导入CDN /文件问题
不全屏查看输出（因为它会叠加任何小于md的内容）

＆＃13;

const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;

const Header = React.createClass({

  render() {

    return ( 
    <div className = "header" >
      <Grid >
        <Row >
          <Col md = {8}>
            <code> Something < /code> 
          </Col>

          <Col md = {4} >
            <code > something < /code> 
          </Col> 
       </Row>

        </Grid> 
    </div>
    );
  }
});

ReactDOM.render( <
  Header / > ,
  document.getElementById('container')
);

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
<div id="container"></div>

＆＃13;

react-bootsrap网格元素意外地表现

1 个答案: