在react-bootstrap中对Bootstrap的“类型对齐”进行调整

3

我正在将一个使用Bootstrap构建的Web应用迁移到React和react-bootstrap,它们都非常棒。但是我在react-bootstrap中没有看到如何平滑地集成Bootstrap的类型对齐类,例如text-center。我的应用程序已经包装在

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

我看到两种解决方法,但我想知道是否有一种推荐的不需要这么hack的方法。

a. 将我的<Grid> JSX标签替换为<Grid bsClass="text-center container">。这似乎可以正常工作,但我在react-bootstrap文档中看到,“通常应仅更改bsClass以为组件提供新的非Bootstrap CSS样式。” 我甚至可以给Grid添加fluid属性,而不会破坏container成为container-fluid

b. 将所有内容包装在<div className="text-center">中。 我喜欢react-bootstrap的一个原因是没有太多额外的<div>,所以这个方法不够优雅。

就像我说的,只是想知道是否有现成的方法可以做到这一点。如果在react-bootstrap文档中对此进行一些评论,那将非常好,因为这是Bootstrap文档中似乎没有提到的部分。

谢谢!

1个回答

2

如果您提到的只是包装应用程序的单个元素,而不是在不同情况下重复使用的元素,则我建议手动添加类名<Grid className="text-center" >


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接