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

Question

我是 React Js 初学者。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>
}

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

<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 声明。这些 props 使用格式命名 {property}{sides}。

其中财产是以下之一：

m - 对于设置边距的类

p - 用于设置填充的类

其中 side 是以下之一：

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

空白 - 用于在元素的所有 4 侧设置边距或填充的类

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