Bootstrap Inline Form on mobile

Question

I want to make an inline form for mobile viewport, such that the search button will be next to the input. But The documents said that

This only applies to forms within viewports that are at least 768px wide.

How can I achieve this results without using inline forms?

Mobile Screen

navbar-header

Here's the navbar-header snippet: (Adding .form-inline in the form won't make it inline as the document mentioned)

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <!-- icon-bar span omitted -->
  </button>
  <a class="navbar-brand" href="#">Brand</a>

  <div class="clearfix"></div>

  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Answer 1

After searching through some of the bootstrap component, I can achieve what I want by thinking the form as an input group rather than as a form group.

Here's the snippet of my new navbar-header

<div class="navbar-header">
  <a class="navbar-brand" href="#">Brand</a><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <!-- omitted icon-bar span -->
  </button>

  <div class="clearfix"></div>

  <div class="container">
    <form class="navbar-form navbar-left" role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <span class="input-group-btn">
          <button type="submit" class="btn btn-default">Submit</button>                
        </span>
      </div>
    </form>
  </div>
</div>