Bootstrap4-宽度有限的父级中的全宽div。

Question

我在我的项目中使用bootstrap4，我想制作一个包含所有类别的页面，如果用户单击任何类别，它将扩展类别的内部div，如下快照：

快照

每个类别都是一个框，它具有一个内部div，其中包含与该类别相关的内容。

问题是内部div将采用父级宽度，而我要确切地是，内部div应采用屏幕的完整宽度，并且在展开时也向下推其他类别。

 <div class="container-fluid">
  <div class="container">
      <div class="row">
        <div class="col-2">
             <div class="category">
                 <div class="">
                   <i>category icon</i>
                   <h6>category one </h6>
                 </div>
                 <div class="extendable-div">Category one content</div>
             </div>
        </div>

         <div class="col-2">
             <div class="category">
                 <div class="">
                   <i>category two icon</i>
                   <h6>category two </h6>
                 </div>
                 <div class="extendable-div">Category two content</div>
             </div>
        </div>

      </div>
  </div>
</div>