ブートストラップ・テキストナビゲーションの上に1つずつ表示

Question

ブートストラップにプロファイル・ボタンを作成しようとしています。

名前の上には名前が表示され、その下にはユーザータイプが、右側にはキャレットが表示されます。基本的には、キャレットドロップダウンを備えたテキストの2行目の標準ブートストラップテキストです。 jsfiddleからわかるように、キャレットは両方のテキストの下に終わります。

キャレットを両方の右側に置くには、何を変更する必要がありますか？

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
     <div>Joe Shmo 

     <div style="font-size: 10px;"> 
     SUPERUSER 
     </div> 
     </div> 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
       <li><a href="/profile"><i class="fa fa-fw fa-user"></i> Edit Profile</a></li> 
       <li><a href="/password-change"><i class="fa fa-fw fa-cog"></i> Change Password</a></li> 
       <li class="divider"></li> 
       <li><a href="/logout/"><i class="fa fa-fw fa-power-off"></i> Logout</a></li> 
      </ul> 
    </li> 

https://jsfiddle.net/5v35ezfc/1/

Answer 1

使用されるこのため、以下の

<div> 
 
    Joe Mallanga <span class="caret"></span> 
 
    <div style="font-size: 10px;"> 
 
    SUPERUSER 
 
    </div> 
 
</div>

Answer 2

i am resolve your issue and also checked on jsfiddle, kindly replace your html code with my new html code and i hope your find your issue is solved 

<div class="container"> 
    <div class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Bootstrap 3</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown active"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Examples</li> 
         <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li> 
         <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li> 
         <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li> 
         <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li> 
         <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li> 
         <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li> 
         <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li> 
         <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li> 
         <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li> 
         <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>       
         <li class="divider"></li> 
         <li class="dropdown-header">Compatibility</li> 
         <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li> 
         <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li> 
         <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li> 
        </ul> 
       </li> 
       <li><a href="http://getbootstrap.com/css">CSS</a></li> 
       <li><a href="http://getbootstrap.com/components">Components</a></li> 
       <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li> 
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span> 
        <div style="font-size: 10px; margin-top: 0px;"> 
         SUPERUSER 
        </div> 
        </a> 
        <ul class="dropdown-menu"> 
        <li><a href="/profile"><i class="fa fa-fw fa-user"></i> Edit Profile</a></li> 
        <li><a href="/password-change"><i class="fa fa-fw fa-cog"></i> Change Password</a></li> 
        <li class="divider"></li> 
        <li><a href="/logout/"><i class="fa fa-fw fa-power-off"></i> Logout</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>