class =“btn-group-justified”扩展了我的页面，样式标记中包含的相同类不起作用。怎么会？

Question

我有一个分解如下的页面：

 <div class="container-fluid" style="min-width:768px">
    <div id="main-sidebar"></div>
    <div id="main-frame"></div>
      <div id="supplementary-sidebar"></div>
      <div id="content-container"></div>
        <!-- ALL THE INTERESTING CODE GOES HERE -->
        <div id="content" class="row"></div>
      </div>
    </div>
    <footer></footer>
 </div>

容器中所有元素的宽度填充屏幕宽度。 主侧边栏的宽度设置为自动。 主框架的最小宽度为72.65％。 补充侧边栏占父主框架的20％。 内容容器占父主框架的80％。

基本上我希望主侧边栏尽可能大， 然后让主框架填满父页面的其余部分。

我偶然取得了成功，并确定了完成工作的Twitter Bootstrap课程。如果我将其删除，屏幕将无法填充。这是：

<div class="btn-group-justified" style=""></div>

我尝试了许多不同的代码行（包含在下面），这些代码都是有意识地尝试这样做的。但在这一点上，我真的可以走得更远。 有人知道为什么这会迫使主框架填满屏幕吗？

以下是我的尝试：

<!---
    NOTHING HERE WORKS

    <div style="width:100%">&nbsp;</div>

    <div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"></div>

    <div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;">&nbsp;</div>

    <div id="spreader" class="row" style="">
        <div class="col-sm-12">
        </div>
    </div>

    <div id="spreader"></div>
    #spreader{
      display:table;
      width: 100%;
      table-layout: fixed;
      border-collapse:seperate;
      display: block;
    }
-->

<!--- THIS IS HOW I ORGINALLY GOT IT TO WORK
<div class="row" style="">
    <div class="col-sm-12">
        <div class="btn-group btn-group-justified" style="">
        </div>
    </div>
</div>
-->

以下是显示相关引导代码的屏幕截图。出于某种原因，当我采取边界崩溃时，这仍然有效。但是如果我像上面的#spreader那样在一个类中包含这个（并且即使我包含border-collapse），它仍然无效。