html - Bootstrap Jumbotron 不调整高度

Question

我在 Bootstrap Jumbotron 中嵌套了一些输入，但 Jumbotron 似乎没有增加输入框的高度。它们似乎流过超大屏幕，而不是在其中。这是我的虚拟代码。关于为什么这不嵌套在 Jumbotron 中的任何线索？

<div class="jumbotron">

          <div class="col-sm-3 col-md-2">

              <div class="inputtext">
                  Current Balance
                  <div class="input-group">
                      <span class="input-group-addon">$</span>
                      <input type="number" id="currentbalance" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="inputtext">
                  Monthly Contributions
                  <div class="input-group">
                      <span class="input-group-addon">$</span>
                      <input type="number" id="monthlycpontribution" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="inputtext">
                  Interest Rate
                  <div class="input-group">
                      <span class="input-group-addon">%</span>
                      <input type="number" id="interestrate" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="inputtext">
                  Years Contributing
                  <div class="input-group">
                      <span class="input-group-addon">+</span>
                      <input type="number" id="yearscontributing" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="">
                  <input class="btn btn-default" type="submit" id="calculate" value="Calculate">
              </div>
          </div>

          <div class="col-sm-9 col-md-10">
              Chart goes here
          </div>

</div> <!-- /container -->

Answer 1

在 Bootstrap 中，col-*类需要包含在父类中 <div>与一类行。这是一个包含父元素的 JSFiddle <div class="row"> :

http://jsfiddle.net/fpcucjed/

现在，场不会流过超大屏幕。