ulのアクティブな項目の全幅の白の背景色が機能していません

Question

私は3列（col-md-3）と9列（col-md-9）のdivを持っています。 col-md-3 divは青い背景と<ul>の要素を持ちます。このulでは、最初の要素で.activeというクラスがあり、アクティブな要素に白の背景色を付けたいと思います。

問題は、全幅の背景の白色を欲しがっているが、機能していないということです。白い背景色がcol-md-3 divの全幅を占めていません。あなたはその問題を解決する方法を知っていますか？

.containerの代わりに.container-fluidを使用すると問題は解決しますが、コンテンツはコンテナではなく.container-fluidを使用する上記のdivに揃えられません。

問題例：https://jsfiddle.net/1pmtxa7f/2/

HTML：

<div class="background-div"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-3 p-0"> 
        <ul class="admin_menu mt-4"> 
         <li class="active"><a href="">Item 0</a></li> 
         <li><a href="">Item 1</a></li> 
         <li><a href="">Item 2 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></li> 
         <li><a href="">Item 3 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></li> 
         <li><a href="">Item 4<i class="fa fa-chevron-down" aria-hidden="true"></i></a></li> 
        </ul> 
       </div> 
       <div class="col-md-9 mt-4 bg-white"> 
        Content 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

あなたが背景をシミュレートし、容易位置とそれを制御するために、擬似要素を使用することができる（それはアクティブオーバーフローするには、左/右の負の値を使用します要素）：

.background-div { 
 
    width: 100%; 
 
    background-color: blue; 
 
    overflow: hidden; 
 
} 
 

 
.bg-white { 
 
    background-color: white; 
 
} 
 

 
.admin_menu { 
 
    list-style: none; 
 
} 
 

 
.admin_menu li { 
 
    padding: 1rem; 
 
    position: relative; 
 
} 
 

 
li.active:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: -150%; 
 
    right: -150%; 
 
    background: #fff; 
 
    z-index: 0; 
 
} 
 

 
.admin_menu li a { 
 
    color: gray; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: relative; 
 
    z-index: 1; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
<div class="background-div"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3 p-0"> 
 
     <ul class="admin_menu mt-4"> 
 
      <li class="active"><a href="">Item 0</a></li> 
 
      <li><a href="">Item 1</a></li> 
 
      <li><a href="">Item 2 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></li> 
 
      <li><a href="">Item 3 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></li> 
 
      <li><a href="">Item 4<i class="fa fa-chevron-down" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-md-9 mt-4 bg-white"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>