Question

我简单的React hello world示例并不允许我水平列出项目。

看起来bootstrap .col-sm-4没有得到应用。我确定我错过了一些超级简单的东西。

http://plnkr.co/edit/QWCkRzHMe5jUfIMVig2P?p=preview

var HelloWorld = React.createClass({

  render: function() {

    return (

      <div className="container">
        <div className="row">
          <div className="col-sm-4">Left</div> 
          <div className="col-sm-4">Middle</div> 
          <div className="col-sm-4">Right</div> 
        </div> 
      </div>  

    );
  }
});

// Now lets render the component.
React.render(<HelloWorld/>, // We pass the value of the prop through an attribute
document.getElementById('app') // Element to attach component to
);

Answer 1

它确实有效！问题是预览面板太小，'col-sm-4'不适用。只需在新窗口中打开它或用'col-xs-4'替换'col-sm-4'即可。它可以使用。

考虑使用http://react-bootstrap.github.io/来获取所有这些类的抽象并使用：

render : function () {
  return (
    <Grid>
      <Row>
        <Col xs={6} sm={4}></Col>
        <Col xs={6}></Col>
      </Row>
    </Grid>
  );
}

React.js中的Bootstrap

1 个答案: