Is react-bootstrap limited in functionality?

问题:

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>

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>

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!

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>

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.

回答1:

I think you can change the default text alignment inside a file named "App.css" that comes with React package

回答2:

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!

The code becomes:

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

with an external css

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

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