我正在尝试创建一个带有 2 个固定边栏和标题的 bootstrap 4 布局。
问题:
目前，斗争似乎是获得正确的 bootstrap 布局以及 flexbox 或 bootstrap 中的普通列之间的斗争。
因为一个侧边栏需要跨越视口(viewport)的高度。固定内容侧边栏也需要是视口(viewport)的高度。
https://jsfiddle.net/8fkgxop1/
我希望它成为什么:
代码示例:
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
width: 3.75rem;
padding: 0;
}
.fixed-wp {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 0;
}
.workpackage_sidebar {
margin-left: 3.75rem;
}
.sidebar-sticky-wp {
position: -webkit-sticky;
position: sticky;
overflow-x: hidden;
overflow-y: auto;
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
height: 100vh;
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto;
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
.feather {
margin-right: 4px;
color: #999;
}
&.active {
color: #007bff;
}
&:hover .feather,
&.active .feather {
color: inherit;
}
}
.sidebar-heading {
font-size: 0.75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}
.navbar .form-control {
padding: 0.75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1);
&:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
}
/*
* Utilities
*/
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar sticky-top bg-dark flex-md-nowrap p-0" style="margin-left: 3.75rem;">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<nav class="bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span> Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span> Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span> Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span> Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span> Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-="file-text"></span> Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-="file-text"></span> Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-="file-text"></span> Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 workpackage_sidebar">
<div class="affix">
<div class="sidebar-sticky-wp">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
</div>
</div>
</div>
<main role="main" class="col-md-9 col-lg-offset-3">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
</main>
</div>
</div>请您参考如下方法:
首先让我们进入 HTML 代码，您必须将“CONTAINER - scrollable - NOT FIXED”div 类更改为:col-md-6 offset-lg-3
<main role="main" class="col-md-6 offset-lg-3">
所以一切都不会被 flexbox 包裹。
现在，让我们开始学习 CSS!
关于“固定内容滚动条”:
.container-fluid .workpackage_sidebar {
height: calc(100vh - 60px);
overflow: auto;
position: fixed;
top: 60px;
left: 0;
padding-bottom: 60px;
}
属性:height: calc(100vh - 60px)，结合overflow: auto;设置元素高度为100%(不包括从顶部得到的60px)属性(property)) 并使其可滚动。
关于“容器 - 可滚动 - 不固定”:
.container-fluid .offset-lg-3 {
margin-left: calc(25% + 60px);
}
由于兄弟元素边距 (.workpackage_sidebar {margin-left: 3.75rem;})，您必须额外添加 60 个像素。
这是一个可用的 CodePen:https://codepen.io/alezuc/pen/bGVEWvG
希望这对您有所帮助!
