可以在导航栏中固定搜索栏 - 移动视图中的引导程序

Question

我是一名网络开发人员，正在使用 bootstrap 和 wordpress 做一个响应式网站。我在主导航栏中有一个搜索栏。在移动视图中，有一个菜单切换按钮，搜索栏将显示在下拉列表中。

我的问题是，我希望搜索栏显示在主导航栏本身，而不是在下拉菜单中，在移动视图中。有什么解决方案吗？ 这是网站网址：http://galtechprojects.com/wp_talichka/

提前致谢。

以下是我在 header.php 中的导航部分代码

  <div class="top-bar-inner-left">

    <!-- Navigation -->
    <nav class="navbar " role="navigation" style="background-color:#000;">
        <div class="container" style="padding-left:0px;padding-right:0px;">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="background-color:#000;">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding:left-0px;padding-right:0px;">


            <!--START COL MD 9-->
            <div class="col-md-9" style="overflow:hidden;">
                <ul class="nav navbar-nav">



        <li class="font"><a href="index.html" class="active">HELLO </a></li>

    <li class="font"><a href="fashion.html">FASHION</a></li>

    <li class="font"><a href="#">FOOD</a></li>

    <li class="font"><a href="#">BEAUTY </a></li>

    <li class="font"><a href="#">ART</a></li>

    <li class="font">  <a href="#">PRESS</a></li>

    <li class="font"><a href="about.html">ABOUT US</a></li>

    <li class="font"><a href="about.html">CONTACT US</a></li>





                    </ul>
                    </div>

                    <!--START COL MD 3-->
                    <div class="col-md-3" style="padding-top:1%; overflow:hidden;padding-right:0px;">

                    <div class="bottom_search">

                    <span style="float:left;">


    <form method="get" id="searchform" action="">
        <div style="float: left;width: 100%;margin-top: 2%;"><input type="text" size="18" placeholder="SEARCH" value="" name="s" id="s" class="input" style="float: left" onfocus="clearvalu()"  />
    <input type="submit" id="searchsubmit" value="" class="btn1" />
    </div>
    </form>

                    </span>

                    </div>

                    </div>
                    <!--END COL MD 3-->
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>

    </div>

Answer 1

向我们展示一些代码，但您可以尝试将其添加到 navbar-header。

所以，我必须将您的表单移动到导航栏标题内。我稍微修改一下你的搜索栏，添加默认的引导搜索字形。

 <div class="top-bar-inner-left">
    <!-- Navigation -->
    <nav class="navbar" role="navigation" style="background-color:#000;">
        <div class="container" style="padding-left:0px;padding-right:0px;">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                style="background-color:#000;"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>

                    <span
                    class="icon-bar"></span> <span class="icon-bar"></span>

                </button>
                <form method="get" id="searchform" action="" class="navbar">

                    <div style="float: left;width: 100%;margin-top: 8%;" class="input-group">
                        <input type="text" size="18" placeholder="SEARCH" value="" name="s" id="s"
                        class="input" style="float: left" onfocus="clearvalu()">

                        <div class="inner-addon right-addon">
                              <i class="glyphicon  glyphicon-search"></i>
                        </div>

                  </div>
                </form>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
            style="padding:left-0px;padding-right:0px;">
                <!--START COL MD 9-->
                <div class="col-md-9" style="overflow:hidden;">
                    <ul class="nav navbar-nav">
                        <li class="font"><a href="index.html" class="active">HELLO </a>
                        </li>
                        <li class="font"><a href="fashion.html" class="">FASHION</a>
                        </li>
                        <li class="font"><a href="#" class="">FOOD</a>
                        </li>
                        <li class="font"><a href="#" class="">BEAUTY </a>
                        </li>
                        <li class="font"><a href="#" class="">ART</a>
                        </li>
                        <li class="font"> <a href="#" class="">PRESS</a>
                        </li>
                        <li class="font"><a href="about.html" class="">ABOUT US</a>
                        </li>
                        <li class="font"><a href="about.html" class="">CONTACT US</a>
                        </li>
                    </ul>
                </div>
                <!--START COL MD 3-->
                <div class="col-md-3" style="padding-top:1%; overflow:hidden;padding-right:0px;">
                    <div class="bottom_search"> <span style="float:left;" class="">




                    </span>

                    </div>
                </div>
                <!--END COL MD 3-->
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</div>

希望这对您有所帮助。 这是一个关于 bootply 的 DEMO：DEMO