如何在导航栏上方创建引导栏4中放置文本或按钮的间隙？

Question

我想在导航栏上方为回声名称创建一个间隙，例如：Welcome Sarah！请检查图像我得到什么输出：

1. 在上图中，我想在“登录|注册按钮。
2. 我想在adidad鞋店上方显示搜索栏，从顶部开始。并欢迎Sarah在右端。然后将显示导航。

我的代码：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

 <div class="container">
 <div class="row float-right" >

  // Search bar
 <input type="text" placeholder="Search" name="search">
 <a href="">Hello Sarah!</a>
 </div>
 </div>


  <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">

  <a class="navbar-brand" href="#">Adidas Shoe Store</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">



  <li class="nav-item">
    <a class="nav-link" href="#" style="color:#007bff;">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Page 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Page 2</a>
  </li>
  </ul>

<ul class="nav navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
  </li>
  </ul>
 </div>
</nav>

Answer 1

这无法正常工作，因为Bootstrap .fixed-top类将z-index和1030的{​​{1}}值分配给position:fixed的顶部。

结果，您添加的nav既显示在.container的后面，也没有显示在上面。

nav需要.container以外的position，并且比static大的z-index才能显示在1030上方。此外，在这种情况下，nav需要一些nav来为padding-top内容留出可视空间。

以下结构和添加的CSS可以达到您想要的效果：

.container

（我在您的<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;"> <div class="row"> <div class="col-sm-6"> <input type="text" placeholder="Search" name="search"> </div> <div class="col-sm-6 text-right"> <a href="">Hello Sarah!</a> </div> </div> </div> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem"> 内抛出了两个.col-sm-6 div，以使事情更容易根据移动分辨率进行排列；还请注意，.row类的宽度有限，与{{1 }}，因此您应将其更改为.container）