如何防止導航欄與其他元素重疊

Question

我正在構建一個網站，但我遇到了導航欄隱藏了頁面的第一位的問題，因此我看不到信息。 我將如何解決這個問題？ 我的網站鏈接在這里：codepen.io/sookyungahn/pen/wzQkBp?editors=1100

Answer 1

將導航欄高度大小的填充添加到正文。

在此處的官方引導程序示例中，他們在頂部添加了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

自 2017 年起添加position: sticky; top:0; position: sticky; top:0; 導航欄，它將解決這個問題。

Answer 4

 <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 如圖所示。

快樂編碼:)