Question

我一直在尝试在一行中渲染两列，下面给出了我正在使用的代码。预期输出为。但反应正在呈现这一点。

<Grid>
  <Row className="what-the-coaching-in">
    What the coaching includes
  </Row>
  <Row className="what-the-coaching-in-below" />
  <Row>
    <Col xs={6} md={4} className="coaching-green-test-2">
      <ul>
        <li>DNA Test & personal consultation.</li>            
        <li>1 to 1 Deep dive session with your Coach to set your 90 day goals, 30 and 60-day bench marks, and your first two-week Daily Core Five (DC5).</li>
        <li>Weekly ‘team’ coaching calls to set new outcomes, overcome hurdles, brain storm and support each other.</li>
      </ul>
    </Col>
    <Col xs={6} md={4} className="coaching-green-test-2">
      <ul>
        <li>Daily support through email and phone messaging.</li>            
        <li>Bespoke exercise programme.</li>
        <li>Meal plans and recipes.</li>
        <li>Metric analysis.</li>
      </ul>
    </Col>
  </Row>
</Grid>

知道为什么没有创建两列？任何帮助将不胜感激，并提前感谢!!

Answer 1

这看起来你没有为bootstrap包含必要的CSS文件。

要使用React-Bootstrap，请包含CSS for Bootstrap v3

将其粘贴到HTML文件中的<head>标记中：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

React-bootstrap：一行中的两列不呈现

1 个答案: