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

Question

我是ReactJS初学者。在React-Bootstrap中是否有类似于Bootstrap中的间距和边距实用类，比如mt-4、p-5、mx-auto等？

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

- pooja

---

是的！它们确实存在，请查看此链接：https://reactstrap.github.io/ 使用react-strap代替。 - Vikas Singh

实用类是 Bootstrap 4 的一部分，而 react-bootstrap 仍然实现的是 bootstrap 3，因此在 react-bootstrap 中没有实用类。 - Vaibhav Vishal

@pooja，请检查您正在使用的react-bootstrap版本。 - Nikhil Kinkar

@VaibhavVishal，他们已经更新了，https://reactstrap.github.io/ 显示React Bootstrap正在使用Bootstrap 4。 - Nikhil Kinkar

我在谈论react-bootstrap，因为OP问了关于它的问题。reactstrap和react-bootstrap是不同的库。 - Vaibhav Vishal

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

- Tony Bui

---

React Bootstrap 基于 Bootstrap 3 而非 4。您绝对不想添加不兼容的 Bootstrap 版本。不幸的是，Bootstrap 3 并没有这些帮助类。 - henry

正如@henry所评论的那样，这就像在你的开发设置中打开了潘多拉魔盒。 - Alejandro Vales

看起来 react-bootstrap beta 现在依赖于 Bootstrap 4。 - cheshireoctopus

Answer 2

空间实用程序将简写的边距和内边距属性转换为边距和内边距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的类 - 空格 - 用于在元素的四个边上都设置边距或内边距的类

有关更多信息，请访问： https://mui.com/system/spacing/

- Joedy

Answer 3

只需给react-bootstrap组件添加className即可使用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>

- Ksaroz Shrestha

---

不错的回答，但我建议您添加“只需将className添加到react-bootstrap组件中即可使用bootstrap实用程序”，因为这可以帮助初学者。 - Ivandez

Answer 4

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

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

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

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

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

根据你设置CSS的方式，你可能想使用rem、em甚至是px来定义间距。

- henry

---

这个答案已经过时，因为从1.0.0版本开始，react-bootstrap基于Bootstrap 4。在1.0.0版本中，您可以仅使用classNames而无需添加自定义CSS。（目前1.0.0仍处于测试版阶段）。 - Mikko Saari

根据文档，它不基于特定的版本：引用：“因为React-Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不会附带任何包含的CSS。” https://react-bootstrap.netlify.com/getting-started/introduction/ - Matthias Güntert