0
私は3列(col-md-3)と9列(col-md-9)のdivを持っています。 col-md-3 divは青い背景と<ul>
の要素を持ちます。このulでは、最初の要素で.activeというクラスがあり、アクティブな要素に白の背景色を付けたいと思います。ulのアクティブな項目の全幅の白の背景色が機能していません
問題は、全幅の背景の白色を欲しがっているが、機能していないということです。白い背景色が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>
ありがとう、それは動作します。 .admin_menu {height:100%}を使用してメニューが高さで残っていない理由も知っていますか? – JohnX
@JohnX 'height:100%'は親の高さの100%を意味するので、親の高さが指定されていなければ、何の効果もありません –
ありがとうございますが、col-md-3に{height:100%作品! – JohnX