html - 如何使用固定顶部解决错误设置侧边栏

标签 html css bootstrap-4

我正在使用 Bootstrap 4 并且我正在使用名为 fixed-top 的 CSS 类离开我的 sidebar 固定电话，当我向下滚动时，这很完美，但碰巧我在 container-fluid 里面有一个表格，在 sidebar 下面，正如我在以下示例中所示:

请记住，我还使用了一个 sidebar Toggle 来收缩或不收缩 sidebar，同样表格在

下方

我离开类 fixed-top 和类代码 container-fluid

.fixed-top {   
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

更新:

添加HTML代码

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="shortcut icon" href="/Content/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body id="page-top">

<!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled fixed-top" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center">
                <div class="sidebar-brand-icon rotate-n-15">
                </div>                    
            </a>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Nav Item - Dashboard -->

                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "TicketForm")">
                        <i class="fa fa-paper-plane"></i>
                        <span>Abrir un ticket</span>
                    </a>
                </li>



            <li class="nav-item">
                <a class="nav-link" href="@Url.Action("Index", "Tickets")">
                    <i class="fa fa-bars"></i>
                    <span>Listado de Tickets</span>
                </a>
            </li>

            <!-- Nav Item ties Collapse Menu -->
                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "Service")">
                        <i class="fa fa-cogs"></i>
                        <span>Gestionar servicios</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "Report")">
                        <i class="fa fa-table"></i>
                        <span>Reportes</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "Dashboard")">
                        <i class="fa fa-line-chart"></i>
                        <span>Dashboard</span>
                    </a>
                </li>

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>

        </ul>
</body>
</html>

最佳答案 

$(document).ready(function() {
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("menuDisplayed");
  });
});
/* Sidebar */

#sidebar-wrapper {
  z-index: 1;
  position: fixed;
  width: 150px;
  height: 100%;
  overflow-y: hidden;
  background: #5b4282;
  opacity: 0.9;
  transition: all 0.5s;
}


/* Main Content */

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
  padding-left: 150px;
  transition: all 0.5s;
}

#menu-toggle {
  transition: all 0.3s;
  font-size: 2em;
  display: block;
  text-align: center;
}


/* Change the width of the sidebar to display it*/

#wrapper.menuDisplayed #sidebar-wrapper {
  width: 250px;
}

#wrapper.menuDisplayed #page-content-wrapper {
  padding-left: 250px;
}


/* Sidebar styling */

.sidebar-nav {
  padding: 0;
  list-style: none;
  transition: all 0.5s;
  width: 100%;
  text-align: center;
}

.sidebar-nav li {
  line-height: 40px;
  width: 100%;
  transition: all 0.3s;
  padding: 10px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
}

.sidebar-nav li:hover {
  background: #846bab;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <a href="#" class="btn" id="menu-toggle"><span class="fa fa-bars"></span></a>
    </div>

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">

            <h1 class="text-center">Sidebar</h1>
            <h2 class="small text-center">Second Header</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <!DOCTYPE html>
</body>

</html>

关于html - 如何使用固定顶部解决错误设置侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59081377/

上一篇：css - 有什么方法可以使类名与 CSS 自定义变量相同？

下一篇：javascript - 在 Chrome ion-modal-view 长内容打印上不允许所有页面

相关文章：

html - Bootstrap，使用 <strong> 元素保持标题高度

twitter-bootstrap - Glyphicon 在 bootstrap 4.1 及更高版本中不起作用

javascript - 网页设计不正常

javascript - 计算所有输入的总和

css - 在所有元素上放置 CSS Transitions 的成本

jquery - ScrollToFixed 滚动问题

javascript - 过渡播放后重置过渡状态

jQuery 多级 CSS 菜单悬停不工作

javascript - 基于 DOM 的脚本

html - Bootstrap 4 左右对齐 div，对于小屏幕，将它们显示在不同的行中

©2024 IT工具网  联系我们