为什么保持React Bootstrap Navbar崩溃? [英] Why stays React Bootstrap Navbar collapsed?

问题描述

我遵循了React-Bootstrap文档，特别是这段代码来制作我的导航栏-> https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

I followed the React-Bootstrap documentation, especially this piece of code to make my navbar -> https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

但是，我从Google Chrome浏览器中清除了我的应用程序会话，并且导航栏似乎保持关闭状态.

However, I cleaned the session of my app from Google Chrome and my navbar seems to stay collapsed.

我在互联网上搜索失败，因为我真的不确定问题出在哪里，从何而来?

I searched the internet without success because I am not really sure what the problem is and where it comes from?

有我的<Navbar/>代码

import React from 'react'
import { 
    Navbar as BoostrapNavBar,
    Nav,
    NavItem,
    MenuItem,
    NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class Navbar extends React.Component {

    render () {
        return (
            <BoostrapNavBar inverse collapseOnSelect>
                <BoostrapNavBar.Header>
                    <BoostrapNavBar.Brand>
                        <a href="/">{this.props.navbar_title}</a>
                    </BoostrapNavBar.Brand>
                    <BoostrapNavBar.Toggle />
                </BoostrapNavBar.Header>
                <BoostrapNavBar.Collapse>
                    <Nav pullRight>
                    <NavItem componentClass={Link} href="/collections" to="/collections">Collections</NavItem>
                        <NavItem componentClass={Link} href="/bracelets" to="/bracelets">Bracelets</NavItem>
                        <NavItem componentClass={Link} href="/glasses" to="/glasses">Lunettes</NavItem>
                        <NavItem componentClass={Link} href="/watches" to="/watches">Montres</NavItem>
                        <NavDropdown eventKey={3} title="Support" id="basic-nav-dropdown"> 
                            <MenuItem componentClass={Link} href="/support" to="/support">Messages</MenuItem> 
                            <MenuItem componentClass={Link} href="/new_message" to="/new_message">Contacter le Support</MenuItem> 
                        </NavDropdown>
                        <NavItem componentClass={Link} href="/login" to="/login"><img src={'../resources/images/user.png'} alt="User"/></NavItem>
                        <NavItem componentClass={Link} href="/shopping_bag" to="/shopping_bag"><img src={'../resources/images/shopping-bag.png'} alt="Shopping-Bag"/></NavItem>
                    </Nav> 
                </BoostrapNavBar.Collapse>
            </BoostrapNavBar>
        );
    }
}

欢迎任何帮助！

<div id="root">
    <div>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header"><a href="/" class="navbar-brand">ShopField</a><button type="button" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
                <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation" class=""><a href="/collections">Collections</a></li>
                    <li role="presentation" class=""><a href="/bracelets">Bracelets</a></li>
                    <li role="presentation" class=""><a href="/glasses">Lunettes</a></li>
                    <li role="presentation" class=""><a href="/watches">Montres</a></li>
                    <li class="dropdown">
                        <a id="basic-nav-dropdown" role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" href="#">Support <span class="caret"></span></a>
                        <ul role="menu" class="dropdown-menu" aria-labelledby="basic-nav-dropdown">
                            <li role="presentation" class=""><a href="/support" role="menuitem" tabindex="-1">Messages</a></li>
                            <li role="presentation" class=""><a href="/new_message" role="menuitem" tabindex="-1">Contacter le Support</a></li>
                        </ul>
                    </li>
                    <li role="presentation" class=""><a href="/login"><img src="../resources/images/user.png" alt="User"></a></li>
                    <li role="presentation" class=""><a href="/shopping_bag"><img src="../resources/images/shopping-bag.png" alt="Shopping-Bag"></a></li>
                </ul>
                </div>
            </div>
        </nav>
        <div>Home Page</div>
    </div>
</div>

推荐答案

目前，React Bootstrap仅适用于Bootstrap 3.

At present, React Bootstrap is for Bootstrap 3 only.

要解决您的问题，请遵循我在此答案中概述的解决方案:

To fix your issue, follow the solution I outlined in this answer:

https://stackoverflow.com/a/48627104/8270343

一旦React Bootstrap与Bootstrap 4兼容，以下信息将变得相关:

Once React Bootstrap becomes compatible with Bootstrap 4, the following information will become relevant:

它保持折叠状态，因为导航栏中没有navbar-expand-*类.响应式类告诉Bootstrap导航栏必须从哪个断点开始扩展.

It stays collapsed because you don't have the navbar-expand-* class in your navbar. That responsive class tells Bootstrap from which breakpoint onwards the navbar has to expand.

因此，如果您希望它从lg断点开始扩展，即使其扩展到大屏幕(lg)和更大屏幕，则需要将navbar-expand-lg类添加到导航栏中.

So, if you want it to expand from the lg breakpoint onwards i.e. make it expand for screens that are large (lg) and larger, then you need to add the navbar-expand-lg class to your navbar.

这意味着:在您的情况下，需要调整您的反应代码，以便将该类包含在导航栏的HTML输出中.

That means: In your case, your react code needs to be adjusted so that this class is included in the HTML output for the navbar.

您将在此处找到有关此类的更多信息:

You'll find more info about this class here:

https://getbootstrap.com/docs/4.0/components/导航栏/#responent-behaviors

这篇关于为什么保持React Bootstrap Navbar崩溃?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！