右侧带有引导导航栏的白条

Question

我正在尝试渲染一个带有一系列链接（LI 元素）的导航栏和一个未折叠但显示在小屏幕下方的右侧搜索框。

几乎下面的代码的工作原理是它根据需要在折叠的导航下方单独显示搜索栏。我正在努力确定确切的原因或解决方案。似乎如果将容器直接放置在导航元素下方，我只会在导航栏折叠时得到该栏。

导航条码：

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

查看了以下内容，但似乎没有一个解决方案可以解决我的问题 Twitter bootstrap white gap on right side of page

Answer 1

我认为您的问题可能来自导航栏形式。尝试使用 col-xs-12 类将其包装在 div 中：

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

这应该可以解决问题。