ブートストラップのイメージがドロップダウンしてオーバーフローが発生する

Question

ブートストラップのナビゲーションバーのドロップダウンでテキストとイメージを入力しようとしています。ただし、ナビゲーションバーの中央に配置されていないため、ページが縮小されたときにオーバーフローギャップが発生します。ここでは、問題のjsFiddleは次のとおりです。https://jsfiddle.net/2r859fmx/

<div class="container-fluid"> 
     <div class="navbar-header"></div> 
     <div id="navbar"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown"> 
       <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 
       <span class="pull-left"> 

Answer 1

あなたは、テキストやイメージのためdrop-downメニューの下divを作成することができます。私はあなたのコードを編集しました。これがあなたの問題の解決であるかもしれません。

<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 
     <div class="col-md-2 pull-right"> 
      <div class="col-md-6"> 
        <img class="circle img-responsive" src="https://s3.amazonaws.com/spotmes3/photo.jpg"> 
       </div> 

        Brian 
     </div> 
</a>