修改

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这很棘手。除非您可以使用sass函数来构建列，否则您必须覆盖该特定.col-md-10的样式。也许是这样的？

#sidebar:not(.show) + [class*=col-] {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

Demo（注意：我正在使用jsfiddle，因为堆栈片段阻止了引导程序js的一部分并且无法执行打开或关闭菜单的部分）

修改

对于那些好奇的人，SCSS的方法是use a mixin

您的SCSS可能如下所示：

#sidebar + main {
  @include make-col(12);
}
#sidebar.show + main {
  @include make-col(10);
}

使用col-md-2作为侧边栏引导程序时的col-md-10的全宽度4

2 个答案:

修改