Currently, I am in the process of constructing a navigation bar for a website that includes a search bar and a grouped button. Everything functions properly when viewed on a desktop, but as soon as I switch to mobile view and the collapsible menu is activated, an issue arises. In this scenario, the search bar remains on the left side, while the button drifts off to the right. Surprisingly, this problem disappears once I eliminate the span element enveloping the input group button class.
<form class="navbar-form navbar-left form-inline" role="search">
<div class="row">
<div class="input-group">
<input type="text" class="form-control" style="width: 250px;"/>
<span class='input-group-btn'>
<button type="button" class="btn btn-default" aria-label="Search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</form>
A visual representation can be found here:
UPDATE: The issue has been resolved! Simply adding a pull-left class to the span was all it took.