Html 导航栏固定左-引导

我试图使引导中的导航栏固定在左侧，如on。 无论如何，它是有效的，但当我添加传单地图的块内容时，我的导航栏仍然在那个里，但我不能点击它。而且，当我越过链接时，我也不明白。以下是我更改的代码：

<!--NAVBAR-->
        <div class="navbar navbar-inverse navbar-fixed-left">
          <a class="navbar-brand" href="#">Brand</a>
          <ul class="nav navbar-nav">
           <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu">
              <li><a href="#">Sub Menu1</a></li>
              <li><a href="#">Sub Menu2</a></li>
              <li><a href="#">Sub Menu3</a></li>
              <li class="divider"></li>
              <li><a href="#">Sub Menu4</a></li>
              <li><a href="#">Sub Menu5</a></li>
             </ul>
           </li>
           <li><a href="#">Link2</a></li>
           <li><a href="#">Link3</a></li>
           <li><a href="#">Link4</a></li>
           <li><a href="#">Link5</a></li>
          </ul>
        </div>

        </div>
        <div class="container col-sm-12">
            <div class="row">
                {% block map_content %}
                        replace me
                {% endblock map_content %}
            </div>
        </div> 

{%block map_content%}
取代我
{%endblock映射_content%}

在此之前，我尝试了更优雅的解决方案。我使用bootstrap4，并尝试了以下方法：

<nav  class="navbar navbar-inverse fixed-left">
          <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="{% url 'index' %}"><p class="logo_name">page name</p></a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
               <li><a href="#">3</a></li>
               <li><a href="#">4</a></li>
            </ul>
          </div>
        </nav>

---

但它不起作用，在这种情况下，我的导航栏固定在顶部，而不是左侧。

尝试添加这些内容。添加额外的CSS以修改现有类

添加这个额外的css：-

<style>
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
float: none;  /* Cancel default li float: left */
width: 139px;
}

.navbar-fixed-left + .container {
padding-left: 160px;
}

/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
</style>

.导航条固定在左侧{
宽度：140px；
位置：固定；
边界半径：0；
身高：100%；
}
.导航栏左侧固定。导航栏导航>li{
浮动：无；/*取消默认li浮动：左*/
宽度：139px；
}
.navbar固定左+.container{
左侧填充：160px；
}
/*使用下拉菜单时（右移弹出）*/
.navbar固定在左侧。navbar导航>li>。下拉菜单{
利润上限：-50px；
左边距：140像素；
}

我在问题中的链接中已经有了CSS文件。如果在单独的文件上编写CSS，链接CSS文件时可能会出现问题。你有（base.html）文件吗？检查路径是否正确。尝试在HTML文件上使用标记。可以。没有传单块，一切正常。我得到左固定导航栏，这是工作。有了传单块，我也得到了左侧固定导航栏，但它不起作用。所以，这不是因为CSS文件，而是因为我在代码中放入了块内容（传单来自哪里）。