使用引导程序时Canvas无法正常工作

Question

大家早上好， 我制作了一个画布来画画，只是当我将其放置在具有boostrap元素的div中时遇到一个错误（col-12 ect ...），这仅适用于工作，我必须删除boostrap才能起作用您一个解决方案？

<div class="container">
            <div class="row">
              <div class="col-12 col-lg-8">
                <div class="block">
                  <div class="blockTitre">
                    <h5>Carte des stations</h5>
                  </div>
                  <div class="blockMaps">
                    <div id="mapid"></div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-lg-4">
                <div class="block">
                  <div class="blockTitre">
                    <h5>Réservation + Info Station</h5>
                  </div>
                  <div class="blockinfo">
                      <h6 style="color: brown; margin-bottom: 20px; text-transform: uppercase;" id="nullstation">Vous devez sélectionner une station pour continuer !</h6>
                      <h6 id="h3name"></h6>
                      <p id="padresse"></p>
                      <p id="pvelo"></p>
                      <p id="pplace"></p>
                  </div>
                  <div class="blockform" id="reservation_1">
                    <form id="form_contact">
                      <input type="text" class="form-control" placeholder="Nom" id="nom" required>
                      <input type="text" class="form-control" placeholder="Prénom" id="prenom" required>

                      <button type="submit" class="btn btn-info" id="btnClick">Suivant</button>
                    </form>
                  </div>
                  <div class="blockform" id="reservation_2">
                      <canvas id="canvas"></canvas>
                    <button type="button" class="btn btn-info" id="btnConfirm">Confirmer</button>
                    <button type="button" class="btn btn-primary" id="annuler">Annuler</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="row" id="reserv">
              <div class="col-12">
                <div class="block">
                  <div class="blockTitre">
                    <h5>Votre Réservation</h5>
                  </div>
                  <div class="blockinfo">
                    <h5 id="station"></h5>
                    <p id="timerp"></p>
                  </div>
                </div>
              </div>
            </div>
          </div>