导航栏中图像的垂直对齐

Question

我有一个正在使用 Bootstrap 4 框架开发的网站。我正在尝试创建一个 navbar，中间有 navbar-brand。我能够将 navbar-brand 放在中间，navbar-brand 的每一侧都有一个 navbar-nav。请在下面找到我使用的代码。我的问题是 navbar-brand 在 navbar.
的中心垂直对齐如何在不调整页边距的情况下将 navbar-brand 对齐到 navbar 的底部，并在 navbar 的顶部突出多余部分？

#hdrContainer {
  background-color: #0a3782;
}

.container {
  background-color: inherit;
}

#tblHeader {
  width: 100%;
  /*font-size: .8125rem;*/
  font-size: 1rem;
  text-align: right;
  color: #ffffff;
  font-weight: bold;
}

#tblHeader tr {
  height: 50px;
}

.breadcrumb {
  background-color: inherit;
  margin-bottom: initial;
  font-weight: bold;
}

.breadcrumb .active {
  color: inherit;
}

#socialbrand {
  text-align: right;
}

#mainNavbar {
  background-color: gray;
}

#mainNavbar .container .navbar {
  position: relative;
  z-index: 0;
  max-height: 40px;
}

.navbar-brand {
  position: relative;
  z-index: 1;
  margin-right: initial;
}

.form-control {
  width: 200px;
}

.btn-outline-navy {
  color: #f6b40e;
  background-color: transparent;
  background-image: none;
  border-color: #f6b40e;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="hdrContainer" class="container-fluid">
  <div class="container">
    <table id="tblHeader">
      <tbody>
        <tr>
          <td>
            <nav aria-label="breadcrumb" role="navigation">
              <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
              </ol>
            </nav>
          </td>
          <td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
            <i class="fa fa-facebook-square" aria-hidden="true"></i>
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
            <i class="fa fa-flickr" aria-hidden="true"></i>
            <i class="fa fa-wordpress" aria-hidden="true"></i>
            <i class="fa fa-youtube-square" aria-hidden="true"></i>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <nav class="navbar navbar-light">
              <form class="form-inline">
                <input class="form-control form-control-sm ml-auto mr-sm-2 float-right" placeholder="Search" aria-label="Search" type="search">
                <button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
              </form>
            </nav>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div id="mainNavbar" class="container-fluid">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <!-- Just an image -->
        <a class="navbar-brand mr-auto ml-auto" href="#">
          <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="75" height="75">
        </a>
        <ul class="navbar-nav ml-auto mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

Answer 1

下面的解决方案利用了 Bootstrap 中可用的各种 flexbox 实用程序类，在 docs.
中有详细描述 .navbar-brand 被包裹在 <div id="logo"> 中，以便将其 positioning 设置为 absolute，并将其 bottom 位置设置为 0。这会将徽标容器向下推到导航栏的底部。
此外，我添加了 .d-none .d-lg-block 类以便在菜单折叠时隐藏徽标。

也可作为 CodePen 使用。

    /* Pushing logo to bottom */
    #logo {
        position: absolute;
        bottom: 0;
    }

    /* Basic styling to resemble to source */
    .navbar {
        background-color: gray;
    }

    #header {
        height: 100px;
        color: white;
        background-color: #0a3782;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }

<div id="header">[header placeholder]</div>

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>

            <div id="logo" class="d-none d-lg-block">
                <a class="navbar-brand m-0" href="#">
                    <img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
                </a>
            </div>

            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">Item 1</a>
                <a class="nav-item nav-link" href="#">Item 2</a>
                <a class="nav-item nav-link" href="#">Item 3</a>
                <a class="nav-item nav-link" href="#">Item 4</a>
            </div>
        </div>
    </div>
</nav>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

导航栏中图像的垂直对齐

Vertical-Alignment of Image in Navbar

html

css

bootstrap-4

twitter-bootstrap-4