h遅く【django】レスポンシブデザインに対応させたい

djangoでwebアプリケーションを作成し、その中でもフォームページを作っていたのですが、スマホだと入力する部分が画面からはみ出してしまいます。bootstrapでこのような問題を解決するのに良い方法はありますでしょうか？

html
1{% extends "com_base.html" %}
2{% load static %}
3
4{% block subject %}投稿する{% endblock %}
5
6{% block main %}
7<div class="container-fluid">
8  <div class="row">
9      <div class="my-div-style w-100">
10          <form method="POST" enctype="multipart/form-data">
11              {% csrf_token %}
12              <table class="table">
13                  {{ form.as_table }}
14              <table>
15              <button class="btn btn-primary" type="submit">作成</button>
16          </form>
17      </div>
18  </div>
19</div>
20{% endblock %}
21

左のように画面内に収めたいのですが、右のように飛び出てしまいます。

ちなみに左のコードは以下になります。

html
1<!--my_post.htmlから遷移-->
2{% extends "com_base2.html" %}
3{% load static %}
4
5{% block subject %}投稿する{% endblock %}
6
7{% block main %}
8
9
10<div class="mb-3">
11  <label for="exampleFormControlInput1" class="form-label">Email address</label>
12  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
13</div>
14<div class="mb-3">
15  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
16  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
17</div>
18{% endblock %}
19