부트 스트랩이있는 nav에 글리프콘을 넣을 수 있습니까?

Question

나는이 같은 탐색 할 원하는 :

로고 :::::::: | ::::: 드롭 다운 + 검색 (중앙) ::::: | ::::::::: : 글리프 콘 1 글리프 콘 2 | 나는이을이 순간에

---

하지만 glyphcon는 탐색 내용의 아래를 보여줍니다.

나는 탐색의 중심에있는 드롭 다운 + 검색을 놓고 문제없이 같은 줄에 glyphcon을 넣을 수있는 방법

<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">은 다음 라인의 오른쪽으로갑니다. 즉, 텍스트와 같은 유사하며이 내려갑니다하지만 <a> 태그를 부트 스트랩 <a href="#"></a> 태그/C 내부 아이콘을 포함 때 패딩 <li></li> 태그에 두 개의 아이콘을 포함하는 요소 nav navbar-nav navbar-right에서 다른 <div class="nav navbar-nav navbar-left">

내부 <div class="input-group navbar-form navbar-center">를 넣어 고정합니다 inside 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>