Question

我是React Js的初学者。像我们在Bootstrap mt-4，p-5，mx-auto等中一样，在React Bootstrap中是否有间距和空白实用程序类。我正在阅读react-bootstrap的文档，也在很多平台上进行了搜索，但找不到正确答案。只想知道它们是否存在。

Answer 1

现在您可以使用以下代码使用react-bootstrap。

   <Container>
<Row>
  <Col>
    <Card body outline color="success" className="mx-auto my-2">
      <CardImg top width="100%" height="auto" src="images/logo/emblem.svg" alt="slc marksheet image" />
      <CardBody>
        <CardTitle>SLC Graduation</CardTitle>
        <CardSubtitle>2008</CardSubtitle>
        <CardText>“Future belongs to those who believe in the beauty of their dreams"- Elenor Roosevelt.</CardText>
        <Badge href="https://drive.google.com/open?id=0B3lpzqmId7sSMkpKM01XNlFDUjQ" target="_blank" color="secondary">View Marks</Badge>
      </CardBody>
    </Card>
    </Col>
</Row>
</Container>

Answer 2

您可以使用Bootstrap，只需将Bootstrap类添加到组件中，它将正常工作。例如组件Header：

class Header extends React.Component {
 <div className='mt-5'> //margin-top 5px

 {..content here}
 </div>
}

请记住将Bootstrap添加到项目中的index.html文件

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Answer 3

不幸的是，由于react-bootstrap基于Bootstrap 3，因此您无权使用Bootstrap 4帮助程序。

幸运的是，您可以自己实现它们。：）

在CSS中只需创建一个新类：

.mt-1 {
  margin-top: 0.25rem !important;
}

现在，您可以在代码中使用className="mt-1"。

根据您设置CSS的方式，您可能需要根据rem，em甚至px来定义间距。

React-Bootstrap中的Spacing和Margin实用程序

3 个答案: