如何防止导航栏与其他元素重叠

Question

我正在建设一个网站，我遇到了一个问题，导航栏隐藏了页面的第一位，所以我看不到信息。我将如何解决这个问题？我网站的 link 在这里： codepen.io/sookyungahn/pen/wzQkBp?editors=1100

Answer 1

在正文中添加导航栏高度大小的内边距。

在官方 bootstrap 示例 here 中，他们在顶部添加了一个 70px 填充。基本上，

body {
  padding-top: 70px;
}

Answer 2

在您的情况下，在 home div id 中添加 padding-top，并在您的导航栏上添加相同大小的高度。

<div class="container-fluid well" id="home" style="display:block; padding-top:50px;">

Answer 3

 <img style="margin-right:10px;margin-top:50px" class="image gap img-rounded pull-left" src="http://odezhda-stilnaya.ru/kartinki/1/ptichka_babochki_zvezdy_2560x1600.jpg" alt="PLACEHOLDER IMAGE" />
    <div>
      <h3 style="font-family:HelveticaNeue, Tahoma; font-weight:200;margin-top:50px;">I am a website developer, passionate about programming and assisting people. I am currently an intern at a tech startup.
      </h3>

很棒的代码:)

只需添加 margin-top:50px 如图所示。

快乐编码:)

Answer 4

自 2017 年起，将 position: sticky; top:0; 添加到导航栏，它将解决此问题。

如何防止导航栏与其他元素重叠

How to prevent a navbar from overlapping other elements

javascript

css

jquery

navbar

twitter-bootstrap-3