Reactstrap:行/列类(col-6)不适用于Card组件

Question

我有一个React应用程序，正在使用Reactstrap来设计我的组件。我想要一个Card来运行我的Container的整个宽度，所以我对CardBody的两个不同部分使用了类col-md-6，但它仍然是垂直堆叠的，而不是水平交叉的。我想要的价格和“选择”按钮是并排的产品名称和描述。我的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

我想通了。关于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>

Answer 2

我想，你忘记了行样式。它应该是这样的=>

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