Question

我已经通过登录搜索了导航栏的Bootstrap 4模板，并且遇到this。所以，我已经将其转换为以下代码：

import React, {Component} from 'react';

class HeaderComponent extends Component {
    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
                <div className="container">
                    <a className="navbar-brand" href="/">Reddit</a>
                    <button className="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
                        &#9776;
                    </button>
                    <div className="collapse navbar-collapse" id="exCollapsingNavbar">
                        <ul className="nav navbar-nav">
                            <li className="nav-item"><a href="/" className="nav-link">Home</a></li>
                            <li className="nav-item"><a href="/" className="nav-link">Popular</a></li>
                            <li className="nav-item"><a href="/" className="nav-link">All</a></li>
                        </ul>
                        <ul className="nav navbar-nav flex-row justify-content-between ml-auto">
                            <li className="nav-item order-2 order-md-1"><a href="/" className="nav-link" title="settings"><i className="fa fa-cog fa-fw fa-lg"></i></a></li>
                            <li className="dropdown order-1">
                                <button type="button" id="dropdownMenu1" data-toggle="dropdown" className="btn btn-outline-secondary dropdown-toggle">Login <span className="caret"></span></button>
                                <ul className="dropdown-menu dropdown-menu-right mt-2">
                                <li className="px-3 py-2">
                                    <form className="form">
                                            <div className="form-group">
                                                <input id="emailInput" placeholder="Email" className="form-control form-control-sm" type="text" required="" />
                                            </div>
                                            <div className="form-group">
                                                <input id="passwordInput" placeholder="Password" className="form-control form-control-sm" type="text" required="" />
                                            </div>
                                            <div className="form-group">
                                                <button type="submit" className="btn btn-primary btn-block">Login</button>
                                            </div>
                                            <div className="form-group text-center">
                                                <small><a href="/" data-toggle="modal" data-target="#modalPassword">Forgot password?</a></small>
                                            </div>
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        )
    }
}

export default HeaderComponent;

这里的问题是未显示登录选项的下拉列表。当我最小化窗口时，所有选项都被隐藏，但是按下按钮不会取消折叠菜单。

Answer 1

我认为您可能具有较高的z-index，因为您的代码当前可在React JSFiddle中运行：https://jsfiddle.net/x9g7683t/

HTML：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

我已经导入了所有Bootstrap脚本（也许可以提供帮助）。

代码是组件渲染的复制和粘贴。

Bootstrap 4未完全渲染ReactJS

1 个答案: