react-bootstrap功能是否受到限制? [英] Is react-bootstrap limited in functionality?

问题描述

我刚刚开始使用 bootstrap 进行反应，并实现了导航栏.我可以看到引导程序具有许多功能，但是我也看到它在功能上受到限制，或者在定制方面没有提供太多的自由".我希望我错了，但这是我的示例:

I just started using react with bootstrap and implemented a navbar. I can see that bootstrap has many functionalities, however I also see that it is limited in functionality, or, it doesn't give as much 'freedom' in terms of customization. I hope I am wrong but here is my example:

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

无论您的设备大小如何，此代码都会在屏幕中间呈现< h1> .效果很好！

This code renders the <h1> in the middle of the screen no matter your device size. It works perfectly!

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

这应该使用屏幕中间的< Navbar.Brand> 渲染导航栏.问题在于它没有效果！

This is supposed to render a navigation bar with the <Navbar.Brand> in the middle of the screen. The problem is that it has no effect!

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

I also tried to apply style instead of the className, or even define my own className and work with it in a .css file but it never works. Is this a limitation of React Bootstrap?

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

I have been able to do something like this to put the text in the middle

            <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> 放置在中心，或通过任何方式对其进行自定义.

I would still like to know how to use the className="text-center" to place the <Navbar.Brand> in the center or, any way to customize it.

推荐答案

我发现此问题非常普遍，在大多数情况下没有答案(此处，但无效.我发现使它起作用的唯一方法是定义一个custom-className并在CSS中对其进行编辑.奇怪的是，它不适用于我的内联样式！

I found out that this problem is pretty common and in most cases has no answer (here, tried every solution offered here but didn't work). I found out that the only way to make it work is to define a custom-className and edit it in CSS. Weird is that it doesn't work with inline styling for me!

代码变为:

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

带有外部CSS

.navbar-brand-custom {宽度:100％;文本对齐:居中；}

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

I also found out that it will never work if you don't specify the width

这篇关于react-bootstrap功能是否受到限制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！