Bootstrap 4在导航栏中的图像上方添加文本

问题描述

我仍然不完全了解Bootstrap中的flex结构。我会写下我想做的事情和编写的代码。简而言之，我要在导航栏中的图像上方添加文本。但是导航栏的容器不允许这样做。我认为这是因为我将容器设置错误。在此先感谢您的帮助。

代码：

.navbar-brand {
  position: absolute;
  width: 100%;
  z-index: 3000;
}

.mnav {
  height: 123px;
  z-index: 2000;
  width: 1200px
}

.has-bg-img {
  z-index: 2000;
}

   

<div class="section fixed-top">
  <div class="container-fluid bg-dark">
    <div class="row p-3 bg-dark mx-auto ">
      <div class="container text-light" style="max-width: 1200px">topnav</div>
    </div>
  </div>

  <div class="container-fluid bg-light d-flex shadow-lg">
    <nav class="navbar  navbar-expand-lg navbar-light bg-light mx-auto mnav">
      <div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto h-dark">
          <li class="nav-item active ">
            <a class="nav-link text-dark" href="#">Home</a>
          </li>
          <li class="nav-item  ">
            <a class="nav-link text-dark" href="//codeply.com">Clinic</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Blog</a>
          </li>
        </ul>
      </div>



      <div class="col-auto  mx-auto">
        <div class="shadow rounded-circle">
          <img src="https://i.imgur.com/swpgs2N.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
        </div>
      </div>



      <div class="mx-5 order-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
                             <span class="navbar-toggler-icon"></span>
                        </button>
      </div>





      <div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto h-dark">
          <li class="nav-item active ">
            <a class="nav-link text-dark" href="#">Home</a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Blog</a>
          </li>
        </ul>
      </div>

      <div class="row pt-4   d-flex align-items-center">
        <div class="col-3  text-white ">
          <span class="navbar-toggler-icon"></span>

          <h5>Appointment</h5>
          <h5>Now !</h5>
          <img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">

        </div>
      </div>




    </nav>


  </div>
</div>

<script src="js/jquery-3.x-git.slim"></script>
<script src="js/bootstrap.min.js"></script>

解决方法

如果唯一的问题是您的文本应该放在图像上，请查看此文章：https://www.w3schools.com/howto/howto_css_image_text.asp

为了将其传输到您的代码中，您可以使用以下代码段（我添加了font-awesome，因为我不确定您的图标来自何处）：

.bookmark {
  position: relative;
  text-align: center;
  color: white; 
}

.bookmark-texts {
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
}

.fa {
  font-size: 35px !important;
  margin-bottom: 5px;
}

.now {
  font-style: italic;
  font-weight: bold;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="row pt-4 d-flex align-items-center">
  <div class="col-3">   
    <div id="bookmark" class="d-inline-block">
      <img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
      <div class="bookmark-texts text-center text-white">
        <!-- <span class="navbar-toggler-icon"></span> -->
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <div class="appointment">Appointment</div>
        <div class="now">Now !</div>
      </div>
    </div>
  </div>
</div>

还可以查看this fiddle的结果：