如何使用引导程序在导航中放置一个字形图标？

Question

我想做一个这样的导航：

Logo:::::::|:::::Dropdown+Search(center):::::|::::::::::Glyphcon1Glyphcon2|

---

此时我做了这个，但字形显示它的导航内容。

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-ex1-collapse">
            <span class="sr-only">Desplegar navegación</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Logotipo</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <div class="input-group navbar-form navbar-center">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
        <ul class="nav navbar-nav navbar-right">
            <li><span class="glyphicon glyphicon-user"></span></li>  
            <li><span class="glyphicon glyphicon-shopping-cart"></span></li>
        </ul>
    </div>
</nav>

我怎样才能将下拉+搜索放在导航的中心并将字形图标放在同一行而不出现问题？

Answer 1

<div class="input-group navbar-form navbar-center"> 占据整行，所以下一个<div class="nav navbar-right navbar-nav"> 转到下一行的右侧。修复将<div class="input-group navbar-form navbar-center"> 放入其他<div class="nav navbar-nav navbar-left">

在元素 nav navbar-nav navbar-right 中，您在 <li></li> 标记中包含两个图标，这与文本类似并且它会下降，但是当您在 <a href="#"></a> 标记 a/c 中包含图标以引导 <a> 标记时，它会被填充在里面nav 班级。

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <div class="nav navbar-nav navbar-left">
        <div class="input-group navbar-form navbar-center">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>  
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
    </ul>
</div>