Bootstrap 导航栏在移动设备上无法正常工作

【问题标题】：Bootstrap Nav bar doesn't work properly on mobileBootstrap 导航栏在移动设备上无法正常工作
【发布时间】：2016-07-10 15:20:07
【问题描述】：

我已经查看了此代码大约十次，但我似乎无法让导航栏在移动设备上正常工作。当我点击它时它不起作用。

编辑：我们使用 React 将导航栏呈现到页面。加了整个JS文件，大家可以看看。

var NavLoggedIn = React.createClass({

      render: function() {
          return (



              //  <div className ="navcontainer">
              //         <nav> 
              //         <a href='/index'>Index</a>
              //             <a href='/pod-search'>POD Search</a>
              //              <a href='/book-now'>Book Now</a>
              //               <a href='/current-bookings'>Current Bookings</a>
              //             <a href='/historic-bookings'>Historic Bookings</a>
              //             <a href='/contact-us'>Contact Us</a>
              //             <a href='/pod-profile'>pod profile</a>
              //             <a href='/my-profile'>My profile</a>
              //             <a href='/login'>Log In</a>
              //         </nav>
              //     </div>



              < nav className = "navbar-fixed-top  navbar-inverse"
              id = "navColor" >
              < div className = "container-fluid" >
              < div className = "navbar-header" >
              < button type = "button"
              className = "navbar-toggle collapsed"
              data - toggle = "collapse"
              data - target = "#navbar"
              aria - expanded = "false"
              aria - controls = "navbar" >
              < span className = "icon-bar" > < /span>
            <span className="icon-bar"></span >
              < span className = "icon-bar" > < /span>
          </button >
              < /div>
        <div id="navbar" className="collapse navbar-collapse" >
          <ul className="nav navbar-nav" id="center myNavbar">
            <li id="color" ><a href='/my - profile ' id="color">My Profile</a> </li>
            <li><a href=' / pod - search ' id="color">POD Search</a></li>
            <li><a href=' / current - bookings ' id="color">Current Bookings</a> </li>
            <li><a href=' / historic - bookings ' id="color">Historic Bookings</a></li>
            <li><a href=' / contact - us ' id="color">Contact Us</a> </li>
            <li><a href=' / index ' id="color">Log Out</a> </li>
          </ul>
        </div>
      </div>
    </nav>
    
    
            )}
        });
        
var NavLoggedOut = React.createClass({
    
    render: function() {
    return (
    
        <div className ="navcontainer">
            <nav> 
                <a href=' / pod - search '>POD Search</a>
                <a href=' / contact - us '>Contact Us</a>
                <a href=' / login '>Log In</a>
                <a href=' / pod - profile '>pod profile</a>
            </nav>
        </div>
    
            )}
        });
  var logged = true;
if (logged) {
    ReactDOM.render(<NavLoggedIn />, document.getElementById('
              navbar '));
} else {
    ReactDOM.render(<NavLoggedOut />, document.getElementById('
              navbar '));
}

此外，当我多次单击汉堡包按钮时，导航栏消失了。

谁能帮我解决这个问题？

【问题讨论】：

• 控制台有错误吗？
• 在 REact 中可能没问题 - 但你有
• 以及所有其他 li 具有相同“颜色”的 id，但在这种情况下，您有一个 li 和 aa 具有相同的 id。