Question

我不知道我的问题的标题是否与我的问题有关，因为我无法胜过这句话;

我对此代码有疑问，我有两个固定的导航栏一个在顶部，另一个在左侧，真正的问题就像这个图像和jsfiddle

问题是顶部导航高于其他导航，我需要顶部的导航器就像这样的左导航

真正的问题当我使用容器时，另一个div就像这张照片一样位于左侧上方

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

我的代码是

<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

Answer 1

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

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

Answer 2

Alesha的回答是正确的，但我注意到它会隐藏面板内容，修复它会添加此代码。

b.Name

如何在两个固定导航栏与容器之间留出空间

2 个答案: