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

Posted 2023-03-05

【中文标题】Bootstrap 导航栏在移动设备上无法正常工作

【英文标题】：Bootstrap Nav bar doesn't work properly on mobile

【发布时间】：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。

你写过clickHandler吗？按钮？

【参考方案1】：

当我切换数据目标字段时，我遇到了同样的问题并为我工作。 请尝试改用它。

<nav class="navbar-fixed-top  navbar-inverse" id="navColor">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
  <ul class="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>

【讨论】：

看看你是不是先调用bootstrap然后再调用jquery。必须先调用 Jquery，然后再进行引导。

是的，刚刚检查过。在 Bootstrap 之前调用 JQuery。

这个对我有用。我删除了您用于反应等的 className 东西，并按照我一开始告诉您的方式进行操作。另外，我先调用 jquery，然后调用 bootstrap.min.js，然后调用 bootstrap css jsfiddle.net/DTcHh/18508