I have a form in a navigation bar where I am trying to display the submit button beside my text box. Everything looks good on larger screens, but when I switch to mobile view, there is an awkward gap between the text box and the button. This issue becomes even more noticeable on pages with multiple input fields in the search bar.
My code is fairly simple:
<nav class="navbar navbar-expand-lg">
@using (Html.BeginForm("Index", "Item", FormMethod.Get, new { id = "form-id", @class = "navbar-form" }))
{
<span class="form-group">
<span class="input-group">
<input type="text" class="form-control" placeholder="Search..." name="qsearch" id="qsearch" value=@auxQsearch />
<span class="input-group-append input-group-btn">
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
</span>
</span>
.
.
.
</span>
.
.
.
}
</nav>
I haven't modified these classes in my CSS file, and as someone relatively new to front-end development, I'm struggling to find a solution to this problem. Any guidance or advice would be greatly appreciated.