导航栏固定在左侧 - Bootstrap

Posted 2023-02-24

【中文标题】导航栏固定在左侧 - Bootstrap

【英文标题】：Navbar fixed left - Bootstrap

【发布时间】：2019-02-14 03:25:29

【问题描述】：

我正在尝试将引导程序中的导航栏固定在左侧，例如 this link。 无论如何，它正在工作，但是当我添加传单地图的块内容时，我的导航栏仍然存在，但我无法点击它。另外，当我越过链接时，我没有得到pointer mouse。这是我更改的代码：

<!--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> 

在此之前，我尝试了更优雅的解决方案。我使用了 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>

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

【参考方案1】：

尝试添加这些东西。添加额外的 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>

【讨论】：

我已经从我提出的问题的链接中获得了那个 CSS 文件。

如果您在单独的文件上编写 css，则链接 css 文件时可能会出现问题。你有（base.html）文件吗？检查路径是否正确。尝试在 HTML 文件上使用 标签。

没关系。没有传单块，一切正常。我得到了固定的导航栏，它正在工作。使用传单块，我也得到了固定的导航栏，但它不起作用。所以，这不是因为 CSS 文件，而是因为我在代码中放入的块内容（传单来自哪里）。