添加下一個配置文件選項，導航欄

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>

我只是想提醒你，這何嘗不是一個自由的編碼服務，也不是教程網站。

希望這會有所幫助！