html - Bootstrap : problems create web header

Question

我正在使用 bootstrap 制作一个网站，我需要创建一个特定的 header ，但我遇到了问题。

下图是我要做的:

下面的图片是我制作的:

我使用的代码是:

#wrapper {
      background-color: #F2F2F2;
      height: 100%;
    }
    
    .navbar {
      background-color: #000000;
      color: #FFFFFF;
    }
    
    #profile {
      border-radius: 100%;
    }

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="wrapper">
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="nav navbar-left top-nav">
          <img id="profile" width="50px" src="assets/images/nobody.jpg">
          <p>Nombre y apellido usuario</p>
        </div>
        <div class="navbar-header">
          <img src="assets/images/logo.jpe">
        </div>
        <ul class="nav navbar-right top-nav">
          <li>Logout<i class="mdi mdi-logout"></i></li>
        </ul>
      </nav>
    </div>


    
    

Answer 1

这是一个使用基本 Bootstrap 概念的选项。希望能帮助到你。

<!--Container-->
<div class="container-fluid">
    <!--Row-->
    <div class="row">
        <!--Col-MD-12-->
        <div class="col-md-12">
            <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
                <!--Left Nav Div-->
                <div class="col-sm-4">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#"><span><img class="img-circle" src="http://placehold.it/50x50"></span></a>
                        </li>
                        <li>
                            <p style="color: white; margin-top: 20%;">Nombre y apellido usuario</p>
                        </li>
                    </ul>
                </div>
                <!--Mid Nav Div-->
                <div class="col-sm-4 text-center"><h3 style="color: white; margin-top: 5%;">LOGO</h3></div>

                <!--Right Nav Div-->
                <div class="col-sm-4">
                    <ul class="nav navbar-nav navbar-right" style="margin-top: 2%; ">
                        <li><a href="#" class="btn btn-default navbar-inverse">Logout&nbsp;<span class="glyphicon glyphicon-off"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div> <!-- End Col-MD-12-->
    </div> <!--End Row-->
</div> <!--End Container-->'