Bootstrap：创建网页标题的问题答案

【问题标题】：Bootstrap: problems create web headerBootstrap：创建网页标题的问题
【发布时间】：2017-05-04 11:26:50
【问题描述】：

我正在使用引导程序创建一个网络，我需要创建一个特定的标题，但我遇到了问题。

下图是我要做的：

下面的图片是我做的：

我使用的代码是：

#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>

【问题讨论】：

我已将徽标居中，我需要将文本放在头像右侧，将所有元素垂直居中并添加边距。
如果问题与 html 和 js 相关，请始终提供有效的解决方案，它可以帮助您和其他人找到更快的解决方案。

标签： html css twitter-bootstrap

【解决方案1】：

最后我找到了解决方案。我一直在搜索，我找到了一种将元素垂直居中的解决方案：

https://stackoverflow.com/a/35388513/1888372

这里说在父 div 上使用display: flex; align-items: center;，所以结果是：

#wrapper {
  background-color: #F2F2F2;
  height: 100%;
}

.navbar {
  background-color: #000000;
  color: #FFFFFF;
  height: 76px;
  display: flex;
  align-items: center;
}

.navbar p {
  display: inline;
}

.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}

#profile {
  border-radius: 100%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
        <div class="col-sm-4">
          <a href="#"><img class="img-circle" src="assets/images/nobody.jpg" width=60></a>
          <p>Nombre y apellido usuario</p>
        </div>
        <div class="col-sm-4 text-center">
          <img src="assets/images/logo.jpe">
        </div>
        <div class="col-sm-4">
          <div class="nav navbar-nav navbar-right">
            <a href="#"  class=" navbar-inverse">Logout<i class="mdi mdi-logut"></i></a>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

现在已经完成了（我必须解决一些问题，但我可以自己解决）。t

【讨论】：

【解决方案2】：

这是一个使用基本 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-->'

【讨论】：

好的，我测试了一下，很棒！唯一的问题是图片右边的文字没有垂直居中，但是我可以做到
您正在使用边距垂直居中，我想自动垂直居中而无需测试哪个是最佳边距。

【解决方案3】：

这可以通过多种方式完成。我刚刚在您的 html 中添加了一些内联 css 用于普通视图（桌面视图）。但是您可以尝试更好的选择以使其响应地工作。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <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>
  <style>
  
  #wrapper {
  background-color: #F2F2F2;
  height: 100%;
}

.navbar {
  background-color: #000000;
  color: #FFFFFF;
}

#profile {
  border-radius: 50%;
}
  </style>
</head>
<body>

<div id="wrapper">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  
    <div class="nav navbar-left top-nav" style="margin:10px;">
      <img id="profile" width="50px" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      <p style="display:inline;">Nombre y apellido usuario</p>
    </div>
    
    <div class="navbar-header" style="margin:0.2% 25%;">
      <img width="100" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <ul class="nav navbar-right top-nav" style="margin:0.8% 1%;">
      <li>Logout<i class="mdi mdi-logout"></i></li>
    </ul>
  </nav>
</div>

【讨论】：