html - "navbar-button" does not align on collapse (mobile view) -

i have button on navbar, code below:

<div class="navbar navbar-default navbar-static-top">   <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="#">brand</a>   </div>   <div class="collapse navbar-collapse">     <ul class="nav navbar-nav">      <li class="active"><a href="#">home</a></li>      <li><a href="#">link</a></li>      <li><a href="#">more</a></li>      <li><a href="#">options</a></li>       <li><button type="button" class="btn btn-default navbar-btn">login</button></li>     </ul>   </div>  </div>

working example: http://www.bootply.com/igs3x7cms8#

so, problem is, when see in mobile view, button in left margin, not aligned other links.

is there way align it? preferably boostrap classes (without setting fixed margin-left component)

yes, need set margin button.

.navbar-btn { margin-left: 15px } 

and aligned other elements. of course, need specify breakpoint, @ mobile view present.

@media (max-width: 767px) { .navbar-btn { margin-left: 15px; } }