如何强制对象留在引导容器/卡（html、css、plotly、bootstrap、django）内？答案

【问题标题】：How to force objects to stay inside a bootstrap container/card (html, css, plotly, bootstrap, django)?如何强制对象留在引导容器/卡（html、css、plotly、bootstrap、django）内？
【发布时间】：2022-02-05 19:44:58
【问题描述】：

我正在制作一个基于 django 的 web 应用程序，它有引导卡，里面有一些图表。我正在使用引导程序，因此图表和卡片都是响应式的；然而，在某些屏幕尺寸下，图表会超出卡片的尺寸。有没有办法强制卡片（或其他容器）中的所有内容都在容器内说？

部分 html 代码。如果有帮助，可以发布图形代码 - 它是用 python + plotly 编写的。我不确定问题出在图形上还是 html/脚本上。

<div class="container">
   <h2 class="pb-2 border-bottom mt-4">Scores for {{ user.username }} </h2>
        <div class="row mb-4 mt-4">
            <div class="col-lg-6">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-titler">Result</h5>
                    <p style="color:gray;"> {{last_test_date | safe}}</p>
                    {{score | safe}}
                     <!-- <div class="chart" id="bargraph1", style="height: 150px">-->
                        <div class="chart" id="bargraph1">
                         <script>
                            var graphs = {{plot1 | safe}}
                         </script>
                     </div>
                      <a href="#" class="card-link text-end p-2">Learn More</a>            
                  </div>
                </div>
             <div class="col-lg-6">
                <div class="card">
                   <div class="card-body">
                    <h5 class="card-title">Results Over Time</h5>
                    <br>
                      <!--<div class="chart" id="bargraph2", style="height: 225px">-->
                        <div class="chart" id="bargraph2">
                         <script>
                            var graphs = {{plot2 | safe}}
                         </script>
                      </div>
                   </div>
                </div>
        </div>
    </div>

【问题讨论】：

标签： javascript html css django twitter-bootstrap

【解决方案1】：

参考

CSS Units - What is the difference between vh/vw and %?

您可以尝试将条形图 1 和 2 的 CSS 编辑为 100%。末尾的百分比可以应用于固定的父容器，例如 card-body

【讨论】：

【解决方案2】：

为图表提供 100% 的宽度。

#bargraph1,#bargraph2{
    width:100%;
}

【讨论】：