Bootstrap4：将一些内容放在导航图标的顶部答案

【问题标题】：Bootstrap4: Put some content on the top of navigation iconBootstrap4：将一些内容放在导航图标的顶部
【发布时间】：2019-07-30 11:20:39
【问题描述】：

我希望我的代码如下所示：

我完成了导航栏图标的创建并放置了徽标，但无法将数据放在导航图标的顶部：

我的代码：

 <nav class="navbar navbar-light bg-dark">
     <a class="navbar-brand text-light" href="#">
      <img src="logo.png" width="30" height="30" alt="">
      My Photos
      </a>
      <div class="row">
        <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-dark p-4">
            <h3 class="text-white h3 ">Contact</h3>
                <span class="text-white">Follow on Twitter</span>
                    <p class="text-white">Like on Facebook</p>
                    <p class="text-white">Email me</p>
                   </div>
                  </div>
                </div>
          <nav class="navbar navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarToggleExternalContent" aria- 
  controls="navbarToggleExternalContent" aria-expanded="false" aria- 
  label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

        </nav>

【问题讨论】：

标签： javascript html css bootstrap-4 navigation

【解决方案1】：

您想要在导航上方的元素不应成为导航的一部分，您可以轻松获得所需的内容...

在下面工作sn-p：

.myNav {
  background: #343a40;
  color: #fff;
  padding: 0 16px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class='row myNav'>
  <div class='col-lg-8 col-md-8 col-sm-8 col-6'>
    <h2>About </h2>
    <p>an album of nice pictures, enjoy it.</p>
  </div>
  <div class='col-lg-4 col-md-4 col-sm-4 col-6'>
    <h2>Contact</h2>
    <span class="text-white">Follow on Twitter</span><br/>
    <span class="text-white">Like on Facebook</span>
    <p class="text-white">Email me</p>
  </div>
</div>
<nav class="navbar navbar-light bg-dark">

  <a class="navbar-brand text-light" href="#">
    <img src="https://www.akberiqbal.com/favicon-32x32.png" width="30" height="30" alt=""> My Photos
  </a>

  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarToggleExternalContent" aria- controls="navbarToggleExternalContent" aria-expanded="false" aria- label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

  </nav>

【讨论】：