html - Bootstrap 导航栏中的表单在折叠模式下有额外的填充

Question

我正在使用 Bootstrap 构建网站，但遇到了导航栏问题。导航栏通常有“品牌”链接和搜索框，但当导航栏折叠时，我希望它只是搜索框，而不仅仅是品牌链接。

这是未折叠的导航栏:

navbar-sm

...这是折叠的导航栏:

navbar-xs

代码如下:

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand hidden-xs">FU</a>
        </div>
            <div>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <label class="sr-only" for="navbarSearchField">Search</label>
                    <input type="search" class="form-control" placeholder="Search" id="navbarSearchField">
                </div>
            </form>
            </div>
      </div>
    </nav>

有什么方法可以去掉搜索框上方和下方的额外填充和线条？它显示搜索框是在菜单中还是单独存在。由于这是在一个超小屏幕上，我不想尽可能浪费屏幕空间。 :)

Answer 1

要删除填充，您只需覆盖 .navbar-form 的一些 CSS 值即可。使用适当的媒体查询，以便更改仅影响 xs 屏幕尺寸:

@media(max-width:768px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
    }
    .navbar-form .form-group {
        margin-bottom: 0;
    }
}

看到这个 demo fiddle .

提示:自定义 Bootstrap CSS 或任何其他框架时，使用浏览器的检查工具来确定需要修改的 CSS 规则很有用。