html - <li>元素在移动版本中显示在同一行中

当视口切换到移动版本时出现此问题
使用引导程序v3

当导航栏切换到自身的移动版本时，2nd和3rd元素位于同一行，因为它们下面有一个下拉列表类。
如图所示。 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>

最佳答案

问题可能出在您的“下拉”类上-确保它没有display：inline。

关于html - <li>元素在移动版本中显示在同一行中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38924868/