Question

尝试让这段代码正常工作，以便汉堡Glyphicon和Nav-Brand位于左侧，然后在右侧（左 - 右）我会有搜索表单 - ＆gt;消息字形 - ＆gt;用户标志符号

我现在以正确的顺序拥有它，但由于某种原因，除非我使用Pull-right并且它将它放在Glyphs的另一侧，否则我无法将搜索表单移到另一侧

    <!-- Navigational Bar -->
<nav id="navbar" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button href="#menu-toggle" class="slidebar-toggle" id="menu-toggle">
            <span class="glyphicon glyphicon-menu-hamburger blue"></span>
        </button>
            <span><a class="navbar-brand" href="/">Title</a></span>
    </div>  
    <!-- Menu & Search Items Right Side of Navbar -->
        <div class="navbar-collapse collapse pull-right">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="alerts"><i class="glyphicon glyphicon-comment blue"></i></a>
                    </li>
                    <li class="dropdown">
                            <a href="#" class="alerts" data-toggle="dropdown"><i class="glyphicon glyphicon-user blue"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/"><i class="glyphicon glyphicon-user"></i> link 1</a></li>
                            <li><a href="/"><i class="glyphicon glyphicon-plus"></i> Link 2</a></li>
                            <li><a href="/"><i class="glyphicon glyphicon-cog"></i>  Link 3</a></li>      
                        </ul>
                    </li>        
                </ul>
            </div>
        </div>
        <div id="search_block_top" class="col-sm-8 clearfix"> 
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search blue"></i></button>
                        </div>
                </div>
            </form>     
        </div>
</nav>

只是想找到一种方法让搜索表单移到右边，任何帮助都将不胜感激

Answer 1

将search_block_top div移到navbar-collapse div之上，移除col-sm-8班级和clearfix班级，并为其分组pull-right

在Navbar Bootstrap 3上调整搜索表单

1 个答案: