4 回答

• 7

  在你的第一行

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
  

  它应该是 data-target="#nav-collapse" 因为你有 <div class="collapse navbar-collapse" id="nav-collapse"> 其中id是 nav-collapse

  回复于 2024-05-02T12:50:01+08:00
• 2

  并将 <nav class="navbar"> 更改为 <nav class="navbar navbar-default">

  回复于 2024-05-02T12:50:01+08:00
• 3

  Bootstrap - 切换按钮不会在移动视图中显示

  FIX：在以下位置进行以下更改：bootstrap.min.css

  这会修复切换按钮的外边框

  .navbar-toggle
  {
      position:relative;
      float:right;
      padding:9px 10px;
      margin-top:8px;
      margin-right:15px;
      margin-bottom:8px;
      background-color:transparent;
      background-image:none;
      border-radius:4px
  }
  

  加

  border:1px solid #444;
  

  （更改颜色代码以符合您的设计）

  .navbar-toggle
  {
      position:relative;
      float:right;
      padding:9px 10px;
      margin-top:8px;
      margin-right:15px;
      margin-bottom:8px;
      background-color:transparent;
      background-image:none;
      border:1px solid #444;          /* added line */
      border-radius:4px
  }
  

  这会修复切换按钮的水平线

  .icon-bar
  {
      display:block;
      width:22px;
      height:2px;
      border-radius:1px;
  }
  

  加

  border:1px solid #444;
  

  （更改颜色代码以符合您的设计）

  .icon-bar
  {
      display:block;
      width:22px;
      height:2px;
      border-radius:1px;
      border:1px solid #444;
  }
  

  回复于 2024-05-02T12:50:01+08:00
• 34

  这应该让你指出正确的方向 . 看起来你的主要打嗝是你的按钮数据目标属性是引用一个类而不是一个ID . 在这种情况下最好使用ID，所以如果你在代码中的其他地方调用该类，你就不会在javascript中抛出曲线球 .

  我也看到你有几个空白的 <li class="dropdown"></li> . 我'm not sure if this is intentional or not, but I would refer to the structure that I'已经封闭 .

  希望这对你有用，祝你好运！

  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="#">Reech</a> </div>
  
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="main-nav">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="/technologies.apsx">Technologies</a></li>
              <li><a href="/complementary-activities.apsx">Complementary Activities</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="/technologies.apsx">Technologies</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- nav navbar-nav -->
      </div><!-- collapse navbar-collapse -->
      <!-- /.navbar-collapse --> 
    </div>
    <!-- /.container-fluid --> 
  </nav>
  

  回复于 2024-05-02T12:50:01+08:00