Question

我使用bootstrap 3来设计我的网站。我定义了一个navbar-fixed-top。

我需要在导航栏上为搜索表单定义一个div固定顶部。

我使用z-index（= 16777271来确定）将搜索div放在导航栏上。

它在我的Firefox浏览器（任何宽度）上运行良好但是当我在手机上试用时，搜索div不会出现。

以下是我的代码的一些部分：

NavBar：

<div class="navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-rt-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

            <a class="navbar-brand" href="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>

    </div>
    <div class="navbar-collapse collapse navbar-right" id="navbar-rt-collapse">
      <ul class="nav navbar-nav">
                        <li><a href="/favorites"><i class="fa fa-history"></i></a></li>
            <li><a href="/login"><i class="fa fa-user"></i></a></li>

      </ul>
    </div>

搜索div的HTML：

                                                                        <div class="fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>

搜索div的CSS：

.fixed-search {
  position: fixed;
  z-index:16777271 !important;
  top: 8px;
  height: 35px;

}

.fixed-search-btn {
  position: fixed;
  z-index:16777270 !important;
  top: 8px;
  height: 35px;

}

我在Google上搜索解决方案，但我没有找到关于此问题的任何讨论。

如果某人有解决方案来解决这个问题，或者可以从哪里解释，我很感兴趣。

谢谢，祝贺，

圣拉斐尔

Answer 1

这就是我所取得的成就。

为此，只需使用我在下面提供的代码替换您的导航栏标记以及输入，同时重要的是删除您已明确申请fixed-search＆amp;的样式。 fixed-search-btn。这些都是不需要的代码。只需使用以下代码替换navbar代码，bootstrap＆amp; font-awesome将负责所有浏览器的其余部分。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
    </div>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group fixed-search">
        <input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
      </div>
      <button type="submit" class="btn btn-default fixed-search-btn">Search</button>
    </form>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav  navbar-right">
        <li><a href="/favorites"><i class="fa fa-history"></i></a></li>
        <li><a href="/login"><i class="fa fa-user"></i></a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

我找到了一种方法来做我想做的事。我以不同的方式定义了问题：我想将搜索查询放在侧栏中的固定导航栏中。所以我真正的问题是：我可以从表单中输入一个输入吗？答案是肯定的。您可以将输入的属性定义为表单ID。这就是全部而且效果很好。

无论如何，谢谢你的帮助！

Div隐藏（下）bootstrap导航栏

2 个答案: