使用搜索按钮创建响应式导航栏

问题描述

我试图使用引导来做出响应的导航栏。我想像。
。

I am trying to make a responsive navigation bar using bootstrap. I want to build like http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar ..

但搜索按钮不会向右移动，折叠时标签会分割并移动到下面的行。在下载Wordpress按钮的地方，我要登录和注册按钮。在折叠品牌名称时，搜索按钮和打开菜单的栏应显示在同一行中。

But the search button don't go to the right and when collapsed the tabs split and move to the line below. At the place of Download Wordpress button I want LogIn and SignUp buttons. On collapsing the brand name, search button and the bars for opening the menu should be shown in same line.

有人可以告诉如何做吗？

Can somebody please tell how to do it? See my code

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">Brand Name</a>

                <form class="navbar-form navbar-right" style="float: right;" role="search">
                    <input type="text" class="form-control" placeholder="Search">
                </form>
            </div>

            <div style="clear:both"></div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Highlights</a></li>
                    <li><a href="#">Test Yourself</a></li>
                    <li><a href="#">Interesting Questions</a></li>
                    <li><a href="#">Ask Queries</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">SignUp</a></li>
                    <li><a href="#">LogIn</a></li>
                </ul>
            </div>
        </div>
    </nav>

.navbar {
    min-height: 120px;
}

.navbar .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-nav>li>a {
    text-transform: uppercase;
    font-family: "jokerman";
    font-size: 16px;
}

@media (min-width: 768px)   {
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: fixed;
        float:  none;
    }
}

推荐答案

em>我真的不明白你的搜索输入应该在xs视图中可见，但这是可行的：

I don't really understand if your search-input should be visible in xs view but here is something working :

Js Fidlle ：

HTML：

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

        <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">Brand Name</a>
            </div>

            </div>

            <div style="clear:both"></div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Highlights</a></li>
                    <li><a href="#">Test Yourself</a></li>
                    <li><a href="#">Interesting Questions</a></li>
                    <li><a href="#">Ask Queries</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">SignUp</a></li>
                    <li><a href="#">LogIn</a></li>
                </ul>
                <form class="navbar-form navbar-right" role="search">
                          <div class="form-group">
      <input type="text" class="form-control" placeholder="Search"/>
    </div>

                </form>
            </div>
        </div>
    </nav>

这篇关于使用搜索按钮创建响应式导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！