Reactstrap：Row/Col 类（col-6）不适用于 Card 组件答案

【问题标题】：Reactstrap: Row/Col classes (col-6) aren't working for a Card componentReactstrap：Row/Col 类（col-6）不适用于 Card 组件
【发布时间】：2020-06-15 20:51:25
【问题描述】：

我有一个 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>

【问题讨论】：

标签： reactjs bootstrap-4 reactstrap

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：