Question

我正在尝试在网页上构建和设计计算器。我正在使用Bootstrap v4。我试图使用＆＃34; offset-4＆＃34;来计算计算器的中心，然后使用＆＃34; col-4＆＃34;设置计算器的宽度。整个计算器包含在这些类的div中。然后我一次想要4个按钮，每个按钮的宽度为＃34; col-1＆＃34;。但是，当我有这些嵌套的＆＃34; col-1＆＃34;类，它们明显短于1 col，并排放置，它们不会填充计算器的宽度。任何人都可以帮助我理解为什么以及如何解决它？感谢您提供任何帮助。

这是HTML：

<div class="container-fluid">
  <div class="offset-4 col-4" id="calc">
  <div class="row">
    <div id="title">
      this line will go the full 4 column widths but the buttons below won't
    </div>
  </div>
  <div class="row">
    <div id="screen">
    Calculator screen
    </div>
  </div>
  <div class="row">
    <div id="ops">
    Operations screen
    </div>
  </div>
  <div class="row">
  <div class="col-1" id="ac">
   AC
  </div>
  <div class="col-1" id="ce">
    CE
  </div>
  <div class="col-1" id="divide">
    &#247;
  </div>
  <div class="col-1" id="mult">
    &#215;
  </div>
  </div>
  <div class="row">
  <div class="col-1" id="seven">
   7
  </div>
  <div class="col-1" id="eight">
    8
  </div>
  <div class="col-1" id="nine">
    9
  </div>
  <div class="col-1" id="minus">
    &minus;
  </div>
  </div>
  <div class="row">
  <div class="col-1" id="four">
    4
  </div>
  <div class="col-1" id="five">
    5
  </div>
  <div class="col-1" id="six">
    6
  </div>
  <div class="col-1" id="plus">
    +
  </div>
  </div>
  <div class="row">
  <div class="col-1" id="one">
   1
  </div>
  <div class="col-1" id="two">
    2
  </div>
  <div class="col-1" id="three">
    3
  </div>
  <div class="col-1" id="equals">
    =
  </div>
  </div>
  <div class="row">
  <div class="col-2" id="zero">
   0
  </div>
  <div class="col-1" id="point">
    .
  </div>
  </div>
  </div>
</div>

以下是codepen项目的链接：https://codepen.io/lieberscott/pen/pdVRGb

Bootstrap嵌套列无效

0 个答案: