Reactstrap：Row/Col 类 (col-6) 不适用于 Card 组件

Question

我有一个 React 应用程序，并且正在使用 Reactstrap 来设置我的组件的样式。我想要一个 Card 到运行的 Container 全宽，所以我将类 col-md-6 用于 [=17] 的两个不同部分=]，但它仍然垂直堆叠而不是水平堆叠。我希望价格和 "Select" 按钮是 side-by-side 以及产品标题和描述。我的 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>

Reactstrap：Row/Col 类 (col-6) 不适用于 Card 组件

Reactstrap: Row/Col classes (col-6) aren't working for a Card component

reactjs

bootstrap-4

reactstrap