элементы сетки реагирующей начальной загрузки ведут себя неожиданно

Question

У меня есть следующий компонент React, который использует react-bootstrap.

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

Два столбца располагаются вертикально друг над другом.Я ожидаю, что они должны быть горизонтально друг от друга.Что я тут не так делаю?

Answer 1

Возможные причины:

1. Импорт проблем CDN / файла
2. Не просмотр вывода в полноэкранном режиме (поскольку он будет составлять для чего-то меньше, чем 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>