html - CoreUI 旁边菜单 float 在主菜单上

标签 html css twitter-bootstrap core-ui

我正在使用管理模板 CoreUI。我的布局是基本布局,如页面 https://coreui.io/v1/docs/layout/options/ 中所述。

我正在尝试将右侧菜单打开 float 在主要内容上,而不是内联减少主要内容的宽度。

我尝试删除aside-menu-fixed,添加aside-menu-floating或absolute,但不起作用。

有没有办法在不修改CoreUI css的情况下做到这一点?

在代码片段下方,但它在这里不起作用

.app-header{background-color:#4B8BF4}
.sidebar{background-color:#FFCD42}
.app-footer{background-color:#DD4F43}
.aside-menu{background-color:#19A15F}
.main{background-color:#EEE}
<link href="https://cdn.jsdelivr.net/npm/@coreui/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53303c2136263a13617d627d64" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@coreui/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdded2cfd8c8d4fd8f938c938a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/coreui.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@coreui/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10737f6275657950223e213e27" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/coreui.min.js"></script>



<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
  <header class="app-header navbar">
    <!-- Header content here -->
    <h2>I'm the header!</h2>
  </header>
  <div class="app-body">
    <div class="sidebar">
      <!-- Sidebar content here -->
      <nav class="sidebar-nav">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">
                            <i class="nav-icon icon-speedometer"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-title">Settings</li>
                </ul>
            </nav>
    </div>
    <main class="main">
      <h1>I'm the main content...</h1>
    </main>
    <aside class="aside-menu">
      <!-- Aside menu content here -->
    </aside>
  </div>
  <footer class="app-footer">
    <!-- Footer content here -->
  </footer>
</body>

最佳答案

body 元素:

  • 添加类aside-menu-off-canvas
  • 并删除类aside-menu-fixed

关于html - CoreUI 旁边菜单 float 在主菜单上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55047038/

相关文章:

javascript - 处理文档中的多个ID

html - 使 div 形状在转换后消失

jquery - 在 bootstrap 下拉列表中选择新元素不会清除之前的选择

javascript - 来自另一个 div 中图像的动态缩略图

javascript - 需要点击超链接才能访问代码

javascript - 文本大小可能会在浏览器调整大小时自动减小吗?

html - 如何在图像列表周围 float 文本 (CSS)

php - 使用 php 在每个页面中包含页脚的方法

javascript - table 互相重叠

html - bootstrap col-md-12 vs. width 100% 在显示/隐藏 div 时表现不同