Question

我正在试图找出如何使搜索框在导航栏中固定，而不是成为下拉菜单的一部分。最终输出将类似于下图。

<div class="container-fluid">
    <!-- add header -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>

    <!-- add menu -->
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/about.html">About</a></li>
          <li><a href="/services.html">Services</a></li>
        </ul>

        <!-- add search form -->
        <form class="navbar-form navbar-right" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search this site">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

以下是我目前正在处理的代码：http://www.bootply.com/fb311f2zSJ#

Answer 1

试试这个：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

/* CSS used here will be applied after bootstrap.css */
.navbar-header form {
    position: absolute;
    right: 20px;
    max-width: 250px;
}
button.navbar-toggle.pull-left {
    margin-left: 15px;
}
@media only screen and (max-width:768px){
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: rgba(0,0,0,0);
        margin-top: 0;
        padding-top: 8px;
    }
    .navbar-form {
        padding: 10px 15px;
        margin-top: 8px;
        margin-right: -15px;
        margin-bottom: 8px;
        margin-left: -15px;
        border-top: 0px solid transparent;
        border-bottom: 0px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0px 0 rgba(255,255,255,.1);
    }
}

＆＃13;

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- add search form -->
            <form class="navbar-form navbar-right" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search this site">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>

        <!-- add menu -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav" style="width:100%">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/about.html">About</a></li>
                <li><a href="/services.html">Services</a></li>     
            </ul>    
        </div>
    </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

您必须添加另一个将在移动设备上显示的搜索表单。您可以使用css设置样式以正确定位搜索栏。

这是更新的html：

<div class="container-fluid">
    <!-- add header -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

      <!-- add the mobile devices search form here -->
     <div class="col-xs-10 visible-xs">
      <form class="navbar-form navbar-right mobile-search" role="search">
        <div class="input-group">
          <input class="form-control" placeholder="Search this site" type="text">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </form>
    </div>
   <!-- end of the mobile devices search form section -->

    </div>

    <!-- add menu -->
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/about.html">About</a></li>
          <li><a href="/services.html">Services</a></li>
        </ul>

        <!-- add search form -->
        <form class="navbar-form navbar-right hidden-xs" role="search">
            <div class="input-group">
              <input class="form-control" placeholder="Search this site" type="text">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

Answer 3

我在默认的css文件中做了一些更改，这可能会对你有帮助。

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header pull-left">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>


        </div>

        <!-- add menu -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="/">Home</a></li>
              <li><a href="/about.html">About</a></li>
              <li><a href="/services.html">Services</a></li>
            </ul>
          <!-- add search form -->


        </div>
         <form class="navbar-form navbar-right pull-right" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search this site">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
      </form>

    </div>
</nav>

CSS：

@media (min-width:768px){
  .navbar-collapse{ 
    float:left
  }
}

@media (max-width:767px){
  .navbar-form.navbar-right{
        border-color: #101010;
        width: calc(100% - 30px);
        padding: 0;
        border: none;
   }
   .navbar{
     border:none;
   }
   .navbar-collapse{  
     background-color: #222;
     position: absolute;
     top: 50px;
     width: 100%;
     left:0;
     margin:0 !important;
   }
}

以下是工作演示：https://jsfiddle.net/vb8ptav5/

修复了Bootstrap Navbar中的搜索框

3 个答案: