html - "col-sm-x"类 div 未跨越适当的宽度

Question

我试图在一行中包含三个 div 元素。这三个 div 在 Bootstrap 中从左到右分别为 2 列宽、8 列宽和 2 列宽。我有一个容器类 div，其中嵌套了一个行类 div。这一行里面有三个 div。

但是，列没有跨越它们应该的宽度。为了说明我的问题，请看这里:https://wizviper777.github.io/UniverseIdleActual/左右div应为2列，中间div应为8。

这是相关的html:

    <div class='container' id='asteroid-hub'>
      <div class='row'>
        <div class='container col-sm-2' id='asteroid-resources'>
          <p>Ore:0</p>
          <p>Metal:0</p>
          <p id='power-text'><strong>Power:0</strong></p>
        </div>
        <div class='container col-sm-8' id='asteroid-buildings'>
          <button class='btn btn-default  bldg'>Mine</button>
          <button class='btn btn-default  bldg'>Refinery</button>
          <button class='btn btn-default  bldg'>Panel</button>
          <button class='btn btn-default  bldg'>Pumpjack</button>
          <button class='btn btn-default  bldg'>Generator</button>
          <button class='btn btn-default  bldg'>Bio Farm</button>
          <button class='btn btn-default  bldg'>Heating Plant</button>
        </div>
        <div class='container col-sm-2' id='asteroid-upgrades'>
          <p>Test</p>    
        </div>
      </div>
    </div>

这是相关的 CSS:

    #asteroid-resources {
      border-right-color: black;
      border-right-style:solid;
      border-right-width:2px;
      height:86vh;
}

    #asteroid-upgrades {
      border-left: black 2px solid;
      margin:0px;
}

    .container-fluid {
      padding:0px;
      margin:0px;
}

    .container {
      padding:0px;
      margin:0px;
}

    .row{
      margin:0px;
      padding:0px;
}

提前感谢您的宝贵时间。

编辑:使用我的代码编辑器，我发现这些 div 实际上大小合适，但第三个 div 右侧有大量空白区域。

Answer 1

所以，事实证明，通过设置 margin:0px;在我的容器类上，并给出 3 个 div 容器类，我导致屏幕右侧出现空间，破坏了列宽系统。

去除边距:0px；然后将总体容器更改为容器流体，允许列跨越页面的整个宽度并且没有任何空白边距。