Ограничена ли реакция-бутстрап в функциональности? - PullRequest
Новая
       36

Ограничена ли реакция-бутстрап в функциональности?

0 голосов
/ 18 декабря 2018

Я только начал использовать реакцию с bootstrap и внедрил панель навигации.Я вижу, что у начальной загрузки есть много функциональных возможностей, однако я также вижу, что она ограничена в функциональности или не дает столько «свободы» в плане настройки.Я надеюсь, что я не прав, но вот мой пример: 

              <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> в центре или, в любом случае, настроить его.

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Я обнаружил, что эта проблема довольно распространена и в большинстве случаев не имеет ответа ( здесь , пробовал каждое предлагаемое решение здесь , но не работало).Я обнаружил, что единственный способ заставить его работать - это определить 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; }

Я также узнал, что он никогда не будет работать, если вы нене указывайте ширину

0 голосов
/ 18 декабря 2018

Я думаю, что вы можете изменить выравнивание текста по умолчанию внутри файла с именем "App.css", который входит в пакет React

...