react-bootstrap 中的引导“类型对齐”答案

【问题标题】：Bootstrap "type alignment" in react-bootstrapreact-bootstrap 中的引导“类型对齐”
【发布时间】：2023-03-12 00:59:02
【问题描述】：

我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap，两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 Bootstrap 的 type alignment classes 如text-center。我的应用被包裹在

<div class="container-fluid text-center">

我看到了两种解决方法，但我想知道是否有推荐的方法来解决这个问题。

一个。用<Grid bsClass="text-center container"> 替换我的<Grid> JSX 标签。这似乎工作正常，但我在react-bootstrap docs 中看到“通常应该只更改 bsClass 以为组件提供新的、非引导的 CSS 样式。”我什至可以将fluid 属性添加到Grid，它会将container 更改为container-fluid 而不会中断。

b.将所有内容包装在<div className="text-center"> 中。我喜欢react-bootstrap 的一件事是干净的代码，没有大量额外的<div>s，所以这是不优雅的。

正如我所说，只是想知道是否有现有的方法可以做到这一点。最好在 react-bootstrap 文档中对此发表评论，因为它是 Bootstrap docs 的一部分，似乎根本没有被提及。

谢谢！

【问题讨论】：

标签： twitter-bootstrap react-bootstrap

【解决方案1】：

我会使用 <Grid className="text-center" > 手动添加该类，特别是考虑到您提到这是一个包装您的应用程序的单个元素，而不是一个将在不同情况下重复使用的元素。

【讨论】：