html - 我怎样才能在容器的两个固定导航栏之间留出空间

标签 html css twitter-bootstrap

我不知道我的问题的标题是否与我的问题有关,因为我找不到比这句话更好的了;

我对这段代码有疑问,我有两个固定的导航栏,一个在顶部,另一个在左侧,真正的问题就像这张图片和 jsfiddle 上的一样

problem

问题是顶部导航在另一个导航之上,我需要像这样在左侧导航旁边放置顶部导航

fix

真正的问题还有当我使用容器时,另一个 div 像这张照片一样出现在左侧上方

enter image description here

我该如何解决这个问题? ?

我的代码是

<body style="background-color:#F2F2F2">
<div style="position: relative; z-index: 3;">
 <div class="navbar-fixed-top" style="background-color:#3e474f;height:643px;width:69px;z-index: 2;">
        <ul>

        <li><a  class="fa fa-th-large fa-2x"href="#"></a></li>   <li><a  class="fa fa-th-large fa-2x"href="#"></a></li>   <li><a  class="fa fa-th-large fa-2x"href="#"></a></li>   <li><a  class="fa fa-th-large fa-2x"href="#"></a></li>
        </ul>
        </div>

        <nav style="z-index: 1"class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header navbar-left">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
              </button>
              <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div class="collapse navbar-collapse navbar-right" id="myNavbar">

              <ul class="nav navbar-nav ">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
              </ul>
            </div>
          </div>
        </nav>

            </div>
ass="container">
 <div class="row">
 <div class="col-sm-6 ">
 <div class="panel-group ">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>
 </div>
</div>
<div class="col-sm-6">

 <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>
 </div>


</div>

<div class="col-sm-6">
 <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>
 </div>
 </div>

 <div class="col-sm-6">
 <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>
 </div>
</div>



</div>
</div>
 <!--------> 

</body>

jsfiddle

最佳答案

因此,尝试添加您的 .navbar.row - margin-left 值。

.navbar, .row {
    margin-left: 69px;
}

关于html - 我怎样才能在容器的两个固定导航栏之间留出空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32364087/

相关文章:

javascript - style.display 不适用于 appendChild

javascript - AngularJS分页表: limitTo parameters do not update in the view

css - 在 bootstrap css 中更改文本的颜色

html - 如何在 Angular 2 应用程序中处理不同的客户版本?

javascript - 单页多 slider

html - 所有边距为 0 的元素看起来都与 * 边距为 0 的选择器不同

html - 如何在保持高度的同时让卡片内容在悬停时向上滑动?

javascript - HTML 表单验证问题

html - CSS 中的 Base64 图标与多种用途的外部图像的性能

javascript - 在父元素之后稍微淡化子元素