White bar on right side with bootstrap navbar

Question

I am trying to render a navbar with a selection of links (LI elements) and a right hand search box that isn't collapsed but instead shows underneath on small screens.

The code below almost works in that it presents the search bar seperately and underneath the collapsed nav as desired. I am struggling to identify the exact cause or resolution. It seems that if a container is placed immediately underneath the nav element I only get the bar when the navbar collapses.

Navbar code:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="/">Food</a>
    </div>
    <div class="nav navbar-nav navbar-right">
        <form class="navbar-form" action="/results/" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/item/food/">foods</a></li>
        <li><a href="/item/wine/">wines</a></li>
        <li><a href="/admin/">admin</a></li>
      </ul>
      </div>
  </div>
</nav>

Reviewd the following but none of the solutions seemed to fix my problem Twitter bootstrap white gap on right side of page

So what is the problem/question? What's wrong with the current solution? Seems to work as expected: http://www.codeply.com/go/FJDpoadCUd — Carol Skelly, Feb 08 '17 at 13:09

score 1 · Accepted Answer · answered Feb 08 '17 at 12:39

I think your problem may be coming from the navbar-form. Try to wrap it in a div with a col-xs-12 class:

<div class="col-xs-12">
    <form class="navbar-form " action="/results/" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </form>
    </div>

This should fix the problem.

White bar on right side with bootstrap navbar

1 Answers1