html - 将 div 的元素放在 css 框中

Question

我使用 React 和 React-Bootstrap 构建了一个网站。我想在模式内创建一个带边框的框。这是我的代码。

.JSX 文件

<Modal.Header closeButton>
  <Modal.Title>Preview</Modal.Title>
</Modal.Header>
<Modal.Body>
  <Col md={6}>
    <div className="previewCard">
      <Col md={3}></Col>
      <Col md={7}>
        <p className="topicTH">Line1</p>
        <p className="topicTH">Line2</p>
        <p className="topicTH">Line3</p>
        <p className="topicTH">Line4</p>
        <p className="topicTH">Line5</p>
      </Col>
      <Col md={2}></Col>
    </div>
  </Col>
</Modal.Body>
<Modal.Footer></Modal.Footer>

.CSS 文件

div.previewCard{
  border-style: dashed;
}

如您所见，即使将元素放入 <div className="previewCard"></div> 框内也有注释.我该如何解决这个问题？

Answer 1

使用 Row 代替 div:

<Row className="previewCard">