css - 右侧带有 Bootstrap 导航栏的白色栏

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>

这应该可以解决问题。