Question

我对<div class="row"> <label class="col-2 text-right">Content:</label> <textarea id="emailContent" class="col-9" v-model="email.content" > </textarea> </div>项目有疑问。它将内容隐藏在容器中。

这是一个常见的问题，可通过添加以下CSS代码来解决：

navbar-fixed-top

现在，当我加载页面时，导航栏不再隐藏该容器。问题是当我想使用body { padding-top: 70px; }转到页面中的特定项目时。在这种情况下，该项目始终被导航栏隐藏。

我在Codeply上创建了一个简单的代码，它显示了此问题。在此示例中，当我单击“转到test3”时，导航栏隐藏了项目href=#item。

这是下面的代码：

<h2 class="font-weight-light">TEST3</h2>

Answer 1

这是解决方案

 body { 
     padding-top: 70px; 

 }

 #test{

     padding-top:90px;



 }

 #test2{
      padding-top:90px;

 }


  #test3{
      padding-top:90px;

 }


  #test4{
      padding-top:90px;

 }

Answer 2

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

Answer 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">

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

3 个答案: