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

我发现这个问题非常普遍，并且在大多数情况下没有答案（here，尝试了提供的所有解决方案here，但均无效）。我发现使它起作用的唯一方法是定义一个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; }

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

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

2 个答案: