React-Bootstrap 中的间距和边距实用程序

Question

我是 ReactJS 初学者。 React-Bootstrap 中是否有像 Bootstrap 中的

mt-4

、

p-5

、

mx-auto

等间距和边距实用程序类？

我正在浏览React-Bootstrap的文档，并在许多平台上进行搜索，但找不到正确的答案。

Answer 1

您可以使用Bootstrap，只需将Bootstrap的类添加到组件中即可正常工作。 例如对于组件标题：

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 2

space 实用程序将简写的 margin 和 padding 属性转换为 margin 和 padding CSS 声明。道具使用格式 {property}{sides} 命名。

财产是以下之一：

m - 用于设置边距的类

p - 用于设置填充的类

边是以下之一：

t - 对于设置 margin-top 或 padding-top 的类

b - 对于设置 margin-bottom 或 padding-bottom 的类

l - 对于设置 margin-left 或 padding-left 的类

r - 用于设置 margin-right 或 padding-right 的类

x - 对于同时设置 *-left 和 *-right 的类

y - 对于同时设置 *-top 和 *-bottom 的类

blank - 用于在元素的所有 4 条边上设置边距或填充的类

欲了解更多信息，您可以访问： https://mui.com/system/spacing/

Answer 3

只需将

className

添加到react-bootstrap 组件即可使用引导程序实用程序。

示例：

       <Container>
    <Row>
      <Col>
        <Card body outline color="success" className="mx-auto my-2"> <!-- << here -->
          <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 4

不幸的是，由于react-bootstrap基于Bootstrap 3，因此您无权访问Bootstrap 4助手。

幸运的是，您可以自己实现它们。 :)

在 CSS 中创建一个新类：

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

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

className="mt-1"

。

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

Answer 5

这也给了我提示。使用 bootstrap 这么多年后，我对它发生的变化感到有点不知所措。尽管如此，我打开引擎盖，似乎 bootstrap 使用 ms- 和 me- 分别表示 margin-left 和 margin-right。这是适用于带有 bootstrap v5 的 React-bootstrap 版本 v2.9.2。

从 bootstrap 5 css 文件中提取：

.ms-1 {
   margin-left: 0.25rem !important;
}

.me-1 {
   margin-right: 0.25rem !important;
}

干杯！！！