Question

当视口切换到移动版本时，我遇到此问题使用bootstrap v3

当导航栏切换到自身的移动版本时，第二个和第三个元素在同一行上，因为它们下面有一个下拉类。如图所示。 img1 img2

如果没有放入drowpdown类，则元素会正确显示这里有什么帮助吗？

<div class="navbar-header ">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <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="index.html">
    <img class="img-responsive" src="images/logo/logo.png" alt="Deccan Airsports Logo">
  </a>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li class="scroll">
      <a href="index.html#home">Home</a>
    </li>
    <li class="scroll dropdown">
      <a href="index.html#services1" class="dropbtn">Hot Air Balloon <span class="caret hidden-sm hidden-xs"> </span></a>
      <div class="dropdown-content hidden-sm hidden-xs">

        <a href="book-a-ride.html">Book A Ride</a>
        <a href="membership.html">Membership</a>
        <a href="faq.html">FAQs</a>
      </div>
    </li>
    <li class="scroll dropdown">
      <a href="index.html#portfolio" class="dropbtn">Services<span class="caret hidden-sm hidden-xs"></span></a>
      <div class="dropdown-content hidden-sm hidden-xs">
        <a href="gliders.html">Gliders</a>
        <a href="sky-diving.html">Sky-Diving</a>
        <a href="drones.html">Drones</a>
        <a href="hang-gliders.html">Hang-Gliders</a>
      </div>
    </li>
    <li class="scroll"><a href="#contact">Contact</a></li>
    <li><a class="scroll" href="about.html">About</a></li>
    <li><a class="scroll" href="faq.html">FAQs</a></li>
    <li class="scroll dropdown"><a href="events.html" class="dropbtn">Events<span class="caret "></a></span>
      <div class="dropdown-content hidden-sm hidden-xs">
        <a href="uc.html">News & Press</a>
        <a href="uc.html">Branding</a>
        <a href="uc.html">Advertisement</a>
      </div>
    </li>
  </ul>
</div>
</div>
</div>
</div>
</header>

Answer 1

问题可能在于您的＆＃34;下拉＆＃34; class - 确保它没有显示：inline。

<li>移动版本中出现在同一行的项目

1 个答案: