は、私はナビゲーションバーを作ったが、私はまだそのようなことを追加する必要が

Question

をナビゲーションバーの横のプロファイルオプションを追加します（赤線）。私はこれを乗り越えることができません。

<nav class="navbar navbar-default"> 
    <div class="container-fluid" style="height: 100px; max-width:1200px"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     <img src="logo.png"> 
     </a> 
     </div> 

     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav" style="padding-top: 35px"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">item 1</a></li> 
      <li><a href="#">item 2</a></li> 
      <li><a href="#">item 3</a></li> 
      <li><a href="#">item 4</a></li> 
      <li><a href="#">About Us</a></li> 

     </ul> 

     <img src="obrazek.jpg" style="width:80px; height: 80px; border-radius: 50%; margin-top: 10px">          

     </div><!--/.nav-collapse --> 
    </div><!--/.container-fluid --> 
    </nav> 

Answer 1

の作業例：ここでは

はコードである

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid" style="height: 100px; max-width:1200px"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"> 
 
     <img src="logo.png"> 
 
     </a> 
 
     </div> 
 

 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav" style="padding-top: 35px"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">item 1</a></li> 
 
      <li><a href="#">item 2</a></li> 
 
      <li><a href="#">item 3</a></li> 
 
      <li><a href="#">item 4</a></li> 
 
      <li><a href="#">About Us</a></li> 
 

 
     </ul> 
 

 
     <img src="obrazek.jpg" style="width:80px; height: 80px; border-radius: 50%; margin-top: 10px">   <div style="display:inline-block;">        
 
      <span>some name</span><br> 
 
      <span>company name</span><br> 
 
      <button>btn1</button><button>btn2</button> 
 
     </div> 
 
     </div><!--/.nav-collapse --> 
 
    </div><!--/.container-fluid --> 
 
    </nav>

私はちょうどSO無料コーディングサービスではないことを、あなたを思い出させるしたい、またチュートリアルのWebサイト。

希望すると便利です。