Bootstrap 导航栏隐藏 #link 上的内容答案

【问题标题】：Bootstrap navbar hide content on #linkBootstrap 导航栏隐藏 #link 上的内容
【发布时间】：2020-08-05 04:22:16
【问题描述】：

我对 navbar-fixed-top 项目有疑问。它隐藏了容器中的内容。

这是通过添加以下css代码解决的常见问题：

body { padding-top: 70px; }

现在，当我加载页面时，容器不再被导航栏隐藏。问题是当我想使用href=#item 转到页面中的特定项目时。在这种情况下，该项目始终被导航栏隐藏。

我在Codeply 上创建了一个简单的代码来显示这个问题。在此示例中，当我单击“Got to test3”时，导航栏隐藏了项目<h2 class="font-weight-light">TEST3</h2>。

下面是代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
    <div class="row">
        <div class="col">
            <div class="sidebar-sticky" id="menu">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#test">Go to test1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test2">Go to test2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test3">Go to test3</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test4">Go to test4</a>
                    </li>
                </ul>
          </div>
        </div>
        <div class="col">
            <div id="test">
                <h2 class="font-weight-light">TEST1</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test2">
                <h2 class="font-weight-light">TEST2</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test3">
                <h2 class="font-weight-light">TEST3</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test4">
                <h2 class="font-weight-light">TEST4</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

嗨！您希望“不隐藏”哪些项目：右侧的 col 和/或左侧的 col（即粘性侧边栏）？
@m1ck 我已经编辑了我的问题。如果您在示例中单击“Go to test3”，您将看到文本“test3”被隐藏
这能回答你的问题吗？ Fixed page header overlaps in-page anchors

标签： html css bootstrap-4 navbar

【解决方案1】：

解决办法

 body { 
     padding-top: 70px; 

 }

 #test{

     padding-top:90px;



 }

 #test2{
      padding-top:90px;

 }


  #test3{
      padding-top:90px;

 }


  #test4{
      padding-top:90px;

 }

【讨论】：

【解决方案2】：

对于当前情况，您可以将padding 添加到div 元素后面有一个h2（例如“Test3”）。添加div h2 { padding-top: 70px; } 可以为您当前的结构做到这一点。但是，为了在您进一步开发项目时不依赖div 之后的h2，您还可以创建一个自己的类来应用padding-top 规则，并将其添加到它所针对的那些元素中是需要的。希望有帮助。

【讨论】：

【解决方案3】：

从问题Fixed page header overlaps in-page anchors 来看，解决方案不是公认的答案，而是在答案中。所以我在这里重复一遍。

我已经在 css 文件中添加了这个类：

.hreflink::before {
  content: "";
  display: block;
  height: 70px; /* fixed header height*/
  margin: -70px 0 0; /* negative fixed header height */
}

然后我已经定义了我想在这个类中使用的每个元素，例如：

<div id="test3" class="hreflink">

【讨论】：