我正在尝试为 nav-header 添加背景颜色,因为它在 col-md-10 内,所以当侧边栏 (col-md-2) 关闭时它不会占据全宽。 我试图将它包装在另一个 div 中,但它不起作用,我无法覆盖 col-md-10 规则。有什么办法吗?
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
<a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a><a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
<a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-2x py-2 p-1"></i></a>
<a href="/" class="navbar-brand"><img src="img/logo.png" height="45" alt=""></a>
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
</div>
最佳答案
也许是一个定位的伪元素来模仿背景。
.col-md-10 .nav-header{
position: relative;
}
.col-md-10 .nav-header::after {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
background: red;
width:calc(100vw - 30px);
}
.col-md-10 .nav-header {
position: relative;
}
.col-md-10 .nav-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: red;
width: calc(100vw - 30px);
z-index: -1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
<a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a><a href="#" class="list-group-item d-inline-block collapsed"
data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
Nav header content
<a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-2x py-2 p-1"></i></a>
<a href="/" class="navbar-brand"><img src="img/logo.png" height="45" alt=""></a>
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
关于html - 将 col-md-2 用于侧边栏 Bootstrap 时 col-md-10 的全宽 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47332199/