Question

我正在尝试在一行中包含三个div元素。这三个div在引导程序中的宽度分别为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

因此，事实证明是通过添加一个空白：0px；在我的容器类上，给3个divs容器类，我正在使空间出现在屏幕的右侧，从而破坏了列宽系统。

删除边距：0px；然后将总体容器更改为容器流体，使这些列可以跨越页面的整个宽度，并且没有任何空白。

“ col-sm-x”类div的宽度不正确

1 个答案: