<li> items appearing in same line in Mobile version
<p>I have this issue when the viewport switches to a mobile version
using bootstrap v3 </p>

<p>when the navbar switches to the mobile version of itself , the 2nd and the 3rd element come on the same line , because they have a dropdown class under them.
as shown in the picture. <a href="http://i.stack.imgur.com/n5qDA.png" rel="nofollow">img1</a> <a href="http://i.stack.imgur.com/kzjlu.png" rel="nofollow">img2</a></p>

<p>if the drowpdown class isnt put then the elements show themselves properly 
any help here?</p>

<pre><code>&lt;div class="navbar-header "&gt;
  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
    &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;span class="icon-bar"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;a class="navbar-brand" href="index.html"&gt;
    &lt;img class="img-responsive" src="images/logo/logo.png" alt="Deccan Airsports Logo"&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;div class="collapse navbar-collapse"&gt;
  &lt;ul class="nav navbar-nav navbar-right"&gt;
    &lt;li class="scroll"&gt;
      &lt;a href="index.html#home"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="scroll dropdown"&gt;
      &lt;a href="index.html#services1" class="dropbtn"&gt;Hot Air Balloon &lt;span class="caret hidden-sm hidden-xs"&gt; &lt;/span&gt;&lt;/a&gt;
      &lt;div class="dropdown-content hidden-sm hidden-xs"&gt;

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