title: Twitter Bootstrap 3: right aligned collapsing nav issue
body: <p>Using Twitter Bootstrap 3.</p>
  
  <p>I have a fixed navbar with the menu items aligned to the right by adding .pull-right to the ul inside the navbar-collapse div.  </p>
  
  <p>When the nav collapses on small screens and you click to open it, the nav items are not 100% width as they should be, but about 30% and pulled to the right.</p>
  
  <p>Have fixed this with:</p>
  
  <pre><code>@media (max-width: 767px) { 
      .navbar-nav.pull-right { float: none!important; }
  }
  </code></pre>
  
  <p>But wondering if there is a better way to do it.</p>
  
  <p>Code for the navbar is:</p>
  
  <pre><code>&lt;!-- Fixed navbar --&gt;
  &lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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="/"&gt;
                  &lt;img src="application/assets/img/main-logo.png" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav pull-right"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu 3 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu 4 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>