html - Bootstrap 侧边栏和导航栏下的内容

标签 html css twitter-bootstrap

有人可以帮我解决这个问题吗?为什么我的侧边栏和内容在我的导航栏下面?我尝试删除类并进行一些更改,但没有成功。

侧边栏和内容应该在导航栏下吗?

我知道我可以在行中创建该类插入并解决我的问题,但我正在尝试解决方案而不创建任何 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/

谢谢。

最佳答案

根据 Bootstrap 的文档:http://getbootstrap.com/components/#navbar-fixed-top .默认情况下,导航栏的高度为 50 像素。

解决方案一:

 body {
    padding-top: 70px;
  }

方案二:

更改类:navbar-fixed-topnavbar-static-top

谢谢大家。

关于html - Bootstrap 侧边栏和导航栏下的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37721260/

相关文章:

html - 整个网站响应但仍然可以向右滚动

html - Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题

javascript - jQuery UI 无法在事件函数之外获取选定的选项卡

Javascript - 禁用提交按钮,直到 3 个字段不为空

javascript - HTML 不显示已解码的 %3C?

html - 如何在Express Nodejs中访问路径权限?

javascript - 我怎样才能消除差距

html - 正文背景图像不显示在 CSS 中,仅在 HTML 中显示

html - 是否可以连续为 DIV 的旋转木马制作动画?

html - Bootstrap 如何让文本在 div 容器中垂直对齐