Как заставить графики оставаться внутри контейнера/карты bootstrap (html, css, plotly, bootstrap, django)?
Я делаю веб-приложение на основе django, в котором есть карточки bootstrap с некоторыми графиками внутри них. Я использую bootstrap, поэтому и графики, и карточки отзывчивы; однако при некоторых размерах экрана графики выходят за пределы карточек. Есть ли способ заставить все, что находится в карточке (или другом контейнере), указывать внутри контейнера?
Частичный 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>
ссылка
CSS Units - Какая разница между vh/vw и %?
Вы можете попробовать отредактировать CSS bar graph1&2 как не 100%. процент в конце может применяться к фиксированному родительскому контейнеру, такому как card-body
Придайте 100% ширины графикам.
#bargraph1,#bargraph2{
width:100%;
}