Reactjs React引导中的间距和边距实用程序

我是初学者。React Bootstrap中是否有像我们在Bootstrap mt-4、p-5、mx auto等中一样的间距和余量实用程序类。我正在浏览React Bootstrap的文档，也在许多平台上搜索过，但找不到正确的答案。只想知道它们是否存在。

您可以使用引导，只需将引导类添加到组件中，它就会正常工作。 例如，对于组件标题：

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

 {..content here}
 </div>
}

类头扩展React.Component{
//页边距顶部5px
{..content here}
}

记住在index.html文件中将引导添加到项目中

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

---

不幸的是，由于react引导基于引导3，您无法访问引导4帮助程序

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

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

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

现在，您可以在代码中使用

className=“mt-1”

---

根据CSS的设置方式，您可能希望以rem、em甚至px来定义间距。

现在您可以使用react引导，如下代码所示

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

SLC毕业
2008
“未来属于那些相信梦想之美的人”——埃琳诺·罗斯福。
视图标记

是的！它们确实存在。请查看此链接：-使用react-Bootstrap代替HeadUtility类是Bootstrap 4的一部分，react-Bootstrap仍然实现Bootstrap 3，因此react-Bootstrap中没有任何实用程序类。@pooja检查您正在使用的react-Bootstrap的版本。@VaibhavVishal他们已经更新了它，react-Bootstrap的状态是使用bootstrap 4i是在OP询问时谈论的。react-Strap和react-bootstrap以及不同的库。react-bootstrap基于bootstrap 3，而不是4。您肯定不想添加冲突版本的bootstrap。很遗憾，bootstrap 3没有这些帮助程序类。正如@henry评论的，这就像打开了潘多拉盒子一样在您的开发设置中，react bootstrap beta版现在似乎依赖于bootstrap 4。这个答案现在已经过时，因为react bootstrap从1.0.0版本开始是基于bootstrap 4的。对于1.0.0版本，您可以只使用类名而不添加自定义CSS。（1.0.0目前仍在beta版。）根据文档，它不是基于特定的版本：Quote:

，因为React Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不附带任何附带的css。