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

Question

I have a button on the navbar, as the 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">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</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, the problem is, when I see in the mobile view, the button is in the left margin, not aligned with the other links.
Is there a way to align it? preferably with boostrap classes (without setting a fixed margin-left to the component)

Answer 1

Yes, you need to set a margin to the button.
.navbar-btn { margin-left: 15px }
and it will be aligned with the other elements.
Of course, you would need to specify the breakpoint, at which the mobile view is present.
#media (max-width: 767px) { .navbar-btn { margin-left: 15px; } }

Answer 2

you can use something like this:
<div class="btn btn-default navbar-btn">Login</div
#media (max-width: 767px) {
a#mybtn {
margin: 8px 0px 10px 16px;
padding: 0;
}
}
a#myBtn {
margin: 8px 0 0 0;
padding: 0;
}