下拉菜单中的Bootstrap媒体

Question

如果我将媒体对象放入Bootstrap下拉列表中，则菜单应该在宽度上展开以容纳媒体。在我在JSiddle中编写的示例中，标题下方的标题和文本不应换行到新行。

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown" id="account">
        <form action="/tracker/logout" method="post">
            <button type="button" id="accountHolder" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Lokesh<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <div class="media">
                        <img class="media-object pull-left" alt="" src="http://www.google.com/homepage/images/google_favicon_64.png">
                            <div class="media-body">
                                <a><h4 class="media-heading">Media heading</h4></a>
                                This is some sample text
                            </div>
                      </div> 
                 </li>
              </ul> 
          </form>               
    </li>
</ul>

请将输出窗口放大，看右边的菜单，因为我想要右侧的菜单。

https://jsfiddle.net/DTcHh/12500/

由于