我在 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 -->
最佳答案
在 Bootstrap 中,col-*
类需要包含在父类中 <div>
与一类行。这是一个包含父元素的 JSFiddle <div class="row">
:
现在,场不会流过超大屏幕。
关于html - Bootstrap Jumbotron 不调整高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26228188/