title: Bootstrap clearfix only on mobile?
body: <p>This is the code I have for the navbar, which works great on desktop.</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top" style="border-bottom-width: 2px;"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div clss="navbar-header"&gt;
        &lt;a href="index.php" class="navbar-brand"&gt;Logo&lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" style="border-color: #4c4c4c;" data-toggle="collapse" data-target="#mainNavBar"&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;/div&gt;
  
      &lt;div class="navbar-collapse collapse" id="mainNavBar"&gt;
        &lt;div&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>But my problem is that in mobile, when extended it looks weird: <a href="https://i.stack.imgur.com/rnxbB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rnxbB.png" alt="enter image description here"></a></p>
  
  <p>Now I can add a clearfix div just before the navbar-collapse and that works great in mobile, but not on desktop. Here are mobile and desktop versions <strong>with</strong> clearfix div: <a href="https://i.stack.imgur.com/GgyRr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GgyRr.png" alt="enter image description here"></a></p>
  
  <p>Desktop <strong>with</strong> clearfix: <a href="https://i.stack.imgur.com/7Jdg4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Jdg4.png" alt="enter image description here"></a></p>
  
  <p>Desktop <strong>without</strong> clearfix (i.e. how it should be)<a href="https://i.stack.imgur.com/RpKDo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RpKDo.png" alt="enter image description here"></a></p>
  
  <p>Is there a way I can use clearfix only when in mobile or is there a better way of doing it?</p>