react-bootstrap 网格元素行为异常答案

【问题标题】：react-bootsrap grid elements behaving unexpectedlyreact-bootstrap 网格元素行为异常
【发布时间】：2018-10-24 07:17:52
【问题描述】：

我有以下使用 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

两列垂直堆叠在一起。我的期望是它们应该彼此水平放置。我在这里做错了什么？

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

可能的原因：

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

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

<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>

【讨论】：