Bootstrap側邊欄和導航欄下的內容

Question

有人可以幫我解決這個問題嗎？ 為什么我的側邊欄和內容在導航欄中？ 我嘗試刪除類並進行一些更改，但沒有成功。

側邊欄和內容應該在導航欄下嗎？

我知道我可以在行中創建該類插入並解決我的問題，但是我在嘗試解決方案時不創建任何CSS或額外的類。

.margin-top100{
  margin-top:100px;
}

HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          project
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right text-center">
            <li><i class="fa fa-pencil" aria-hidden="true"></i>
              <br>link </li>
            <li><i class="fa fa-gavel" aria-hidden="true"></i>
              <br>link</li>
            <li>
              <br> Welcome </li>
          </ul>
        </div>
        <!--/.navbar-collapse -->
    </div>
    </nav>
  </div>
</div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-mg-2 col-sm-2"> sidebar </div>
    <div class="col-mg-10 col-sm-10"> content </div>
  </div>
</div>

CSS：

.navbar-inverse {
  padding: 20px;
  color: white;
}

jsfiddle： https ://jsfiddle.net/5zc66j20/

謝謝。

Answer 1

按照Bootstrap上的文檔： http : //getbootstrap.com/components/#navbar-fixed-top 。 默認情況下，導航欄的高度為50px。

解決方案1：

 body {
    padding-top: 70px;
  }

解決方案2：

將類： navbar-fixed-top更改為navbar-static-top

謝謝大家

Answer 2

小提琴更新

僅由於position屬性，就會發生此問題。 現在的解決方案是：

.margin-top100{
  margin-top:100px;
}

當您的內容部分開始時，請使用margin-top100類。

Answer 3

我強烈建議您使用本教程

在我看來，它們為主體頂部添加了填充。 我承認我也不對這個答案感到瘋狂。 但是，如果導航欄的position: fixed; ，沒有辦法使其他元素自動在其周圍流動（這是一種position: fixed點）。