react-bootstrap功能是否受到限制？

Question

我刚开始使用带有bootstrap的 react并实现了导航栏。 我可以看到引导程序具有许多功能，但是我也看到它在功能上受到限制，或者在定制方面没有提供太多的“自由”。 我希望我是错的，但这是我的例子：

              <Grid>
                <Row className="text-center">
                   <h1>Our Products</h1>
                </Row>
              </Grid>

无论您的设备大小如何，此代码都会在屏幕中间显示<h1> 。 它完美地工作！

            <Navbar>
                <Navbar.Brand className="text-center">
                    <a className='menuItem' href="#home">Sample Text</a>
                </Navbar.Brand>
            </Navbar>

假定使用屏幕中间的<Navbar.Brand>呈现导航栏。 问题在于它没有效果！

我也尝试应用样式而不是className，甚至定义自己的className并在.css文件中使用它，但是它永远无法工作。 这是React Bootstrap的限制吗？

我已经能够做这样的事情来将文字放在中间

            <Grid>
                <Row className="show-grid">
                    <Col xs={4} md={5}></Col>
                    <Col xs={4} md={5}>{this.props.children}</Col>
                    <Col xs={4} md={5}></Col>
                </Row>
            </Grid>

我仍然想知道如何使用className =“ text-center”将<Navbar.Brand>放置在中心，或者以任何方式对其进行自定义。

Answer 1

我认为您可以在React包随附的名为“ App.css”的文件中更改默认文本对齐方式

Answer 2

我发现这个问题非常普遍，并且在大多数情况下没有答案（ 在这里 ，尝试了这里提供的每个解决方案，但是都行不通）。 我发现使它起作用的唯一方法是定义一个custom-className并在CSS中对其进行编辑。 奇怪的是，它不适用于我的内联样式！

代码变为：

<div>
                 <Navbar>
                    <Navbar.Brand className="navbar-brand-custom">
                        <a href="#home"><p>Metanice</p></a>
                    </Navbar.Brand>
                </Navbar>
</div>

带有外部CSS

.navbar-brand-custom { width: 100%; text-align: center; }

我还发现，如果不指定宽度，它将永远无法工作