Restraps：行/颜色类（col-6）不适用于Card组件

Question

我有一个React应用，正在使用Reactstrap设置组件样式。我希望单个Card以Container的全宽运行，所以我在col-md-6的两个不同部分使用类CardBody，但它仍然垂直堆叠而不是水平堆叠。我希望价格和“选择”按钮与产品标题和说明并排。我的index.html文件中有bootstrap CDN，并且我知道它已连接，因为我的Bootstrap类在我的应用程序的其他组件中工作。谁能帮我弄清楚如何使其水平堆叠？

我的代码：

// component is wrapped in a <Container> in the parent component
<Row>
  <Card>
    <Col className="col-6">
      <CardBody>
        <h5>Product title</h5>
        <CardText>Some quick example text to build on the product title and make up the bulk of the card's content.</CardText>
      </CardBody>
    </Col>
    <Col className="col-6">
      <CardBody>
        <h6>Price: { cost }</h6>
        <Button color="success" size="lg" onClick={ handleSelection }>Select</Button>
      </CardBody>
    </Col>
  </Card>
</Row>

Answer 1

我认为，您忘记了行样式。应该是这样=>

<div class="container">
   <div class="row">
      <div class="col-sm">
           One of three columns
      </div>
      <div class="col-sm">
           One of three columns
      </div>
    </div>
</div>

Answer 2

我知道了。关于Card组件的类的某些事情会丢掉。如果将Row包装在Card中，而不是用其他方法包装，则可以使用。

<Card>
  <Row>
    <Col>
      <CardBody>
        <h5>Product Title</h5>
        <CardText>Text about product</CardText>
      </CardBody>
    </Col>
    <Col>
      <CardBody>
        <h6>Price: 50</h6>
        <Button>Select</Button>
      </CardBody>
    </Col>
  </Row>
</Card>