Question

如何在引导导航栏上方显示内容。我尝试了下面的代码，但显示内容在导航栏下方。

index.html

 <body>
  <div class="container" id="topContent">Desktop only content above nav..</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-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="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>

style.css

  @media (max-width: 767px) { 
       .navbar{
          margin-top:0;
          top:-65px;
           position:relative;
        }
        #topContent{
          margin-top:45px;
        }

Answer 1

尝试删除fixed-top中的类nav class=

HTML

<body>
  <div class="container" id="topContent">Desktop only content above nav..</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-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="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>

在CSS中，尝试：

@media (max-width: 767px) { 
       .navbar{
          margin-top: 20px // the size that you want to your div above the navbar
        }
        #topContent{
          top: 0;
          position: fixed;
        }

请记住，在此CSS中，您正在设置最大宽度的类：767px，因此请在此尺寸的屏幕上进行测试，让我知道它的工作原理：）

Answer 2

假设您要使用固定的导航栏，则可以在媒体查询中使用min-width而不是max-width ...

@media (min-width: 992px) { 
   .navbar{
      margin-top:0;
      top:45px;
    }
}

演示1：https://www.codeply.com/go/l0MAcYsfO2

如果您要避免使用多余的CSS ，请使用一种响应实用程序类。例如，将mt-lg-5用于仅适用于台式机（lg及更高版本）的上边距。

<div class="container" id="topContent">Desktop only content above nav..</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mt-lg-5">
  <div class="container">
  </div>
</nav>

演示2：https://www.codeply.com/go/voowMd6pom

另请参阅：Bootstrap 4 page wide header bar above navbar

Answer 3

在此代码中，

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

固定顶部类在那里。它将使导航栏仅固定在顶部

Answer 4

我想最好的方法是不要篡改Actual bootstrap组件，因为有人会建议您最近几年一直在使用它的人。

实现目标最简单的方法是在导航栏中创建两个单独的内容框，如下所示：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    HELLOO
  </div>
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
 </nav>

在导航栏中使用两个容器，可以确保它们彼此重叠。这也可能会篡改响应式设计，但是您可以单手擦除不同的容器，以实现不希望出现的已定义分辨率。

由于它看起来很简单，因此您不应在此处尝试使用大量的CSS。在html部分定义Stuff会更有效，并且可以在以后节省很多时间：）

在导航栏上方显示引导程序内容

4 个答案: