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。默认情况下，导航栏高50像素。

解决方案1：

 body {
    padding-top: 70px;
  }

解决方案2：

将班级：navbar-fixed-top更改为navbar-static-top

谢谢大家。

Answer 2

Fiddle UPDATED

仅仅因为position属性会出现此问题。 现在的解决方案是：

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

在您的内容部分开始时使用课程margin-top100。

Answer 3

我强烈建议this tutorial让事情顺利进行

在我看来，他们喜欢在身体顶部添加填充物。我承认我对这个答案也不是很疯狂。但是，如果导航栏有position: fixed;，则无法让其他元素自动在其周围流动（这就是position: fixed）。

导航侧边栏和导航栏下的内容

3 个答案: