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不是免费的编码服务，也不是教程网站。

希望这有帮助！

在导航栏旁边添加配置文件选项

1 个答案: