响应性画布超出了div

Question

我使用ChartJS将响应性图表放置在div中。我还使用了引导程序，所以div类是以网格为焦点的(例如。md-9)。这张图表不断扩展到div以外。我正在考虑溢出:隐藏在div上，但不希望在显示时丢失任何数据。这是我的开发站点的链接。如能提供任何援助，则不胜感激：

http://investingcalculator.azurewebsites.net

我当前的HTML代码：

        <div class="budgetcalcsection">
        <div class="row">

            <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">
                    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">
                    Monthly Contributions
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="number" id="monthlycontribution" 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 class="">
                    <input class="btn btn-default" type="submit" id="reset" value="Reset">
                </div>

                <div class="inputtext">
                    Ending Balance
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="text" id="endingbalance" class="form-control" placeholder="0" readonly>
                    </div>
                </div>
            </div>

            <!-- Investing Chart -->

            <div class="col-sm-9 col-md-10">
                    <canvas id="canvas"></canvas>
            </div>

        </div>
    </div>

Answer 1

问题的根源在于ChartJS没有考虑到元素上的显示框是边框。它将图表的大小调整到div的全部宽度，而不考虑填充。

为了修复它，只需在列中放置一个没有任何引导列类的div，并使用ChartJS将其作为目标。