How to make bootstrap3's navbar's input size to fill with the rest of the space?

Question

I want to use the input group in navbar-form, like following code:

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

It got fixed size about 200px in firefox. However, in chrome or safari, the search takes a whole new line. I want to know does bootstrap's css control the input's width.

input-group-btn got two css setting, display: table-cell; width: 1%. What are these for?

In the docs, the default search bar is:

<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>

It works both fine in firefox or chrome, but I want it to take the rest of the navbar's space. Like facebook's search bar.

I am a individual developer, I am not good at front end design, Does anyone know anything about this particular request?

Answer 1

I had the same issue just now.

I use Safari and unfortunately, the form element takes the whole line (100% of the size) (however on Firefox, it doesn't).

A simple and easy fix would be to precise the form's width below 100%.

<form class="navbar-form navbar-left" style="width:40%" role="search">
    <div class="input-group">
        <input class="form-control" placeholder="product" type="text">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Search</button>
        </span>
    </div>
</form>

Note: width-40 class instead of the style attribute doesn't fix it...don't know why however.

Answer 2

It's a Chrome bug (see here). There is no need to using hard CSS. You can fix it by:

.less

@media (min-width: @grid-float-breakpoint) {
  .navbar-form {
    .input-group-btn,
    .input-group-addon {
      width : auto;
    }
  }
}

or .css

@media (min-width: 768px) {
  .navbar-form .input-group-btn,
  .navbar-form .input-group-addon {
    width: auto;
  }
}