html - 将 col-md-2 用于侧边栏 Bootstrap 时 col-md-10 的全宽 4

Question

我正在尝试为 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>

Answer 1

也许是一个定位的伪元素来模仿背景。

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