Некоторые кнопки и ссылки не работают в сетке bootstrap

Question

Я едва ли являюсь фронтенд-разработчиком и использую готовые сниппеты для своего внешнего интерфейса. В настоящее время я столкнулся с проблемой, из-за которой кнопки и ссылки не работают в моем нижнем колонтитуле, вот некоторые из моих кодов:

base. html

  <!-- Footer Links -->
  <div class="container" style="padding-top: 30px;">
    <!-- Grid row -->
    <div class="row">
      <!-- Grid column -->
      <div class="col-md-3 col-lg-4">
        <!-- Content -->
        <h6 class="text-uppercase font-weight-bold" style="color: #AAAAAA;">{{settings.sitesettings.CompanySettings.company_name}}</h6>
        <p style="color: #fff;">{{settings.sitesettings.CompanySettings.company_subtitle}}</p>
        <hr style="color: white;">
        <div>
          <h6 style="color: #AAAAAA;">{{settings.sitesettings.CompanySettings.company_social_media_title}}
          </h6>
          {%for icon in settings.sitesettings.CompanySettings.company_social_media.all%}
          {%image icon.social_media_icon fill-30x30 as icon%}
          <a href="google.com"><img src="{{icon.url}}" alt="{{icon.alt}}" style="width:10% ;height:auto;back"/></a>            -->#this is not working.
          {%endfor%}
        </div>

      </div>

      <!-- Grid column -->
      {%for loop_cycle in settings.sitesettings.CompanySettings.footer_settings.all%}
      <div class="col-md-2 col-lg-2 col-xl-2">
        <!-- Links -->
        <h6 class="text-uppercase font-weight-bold" style="color: #AAAAAA;">{{loop_cycle.footer_header}}</h6>
        {%for link in loop_cycle.footer_links.all%}
        <p>
          <a href="{%pageurl link.link%}" style="color: #fff;">{{link.link_display_name}}</a>  -->#this is somehow working.
        </p>
        {%endfor%}
      </div>
      {%endfor%}
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-4 col-lg-3 col-xl-3">
        <!-- Links -->
        <h6 class="text-uppercase font-weight-bold" style="color: #AAAAAA;">Contact</h6>
        <p style="color: #fff;">
          <i class="fa fa-home mr-3"></i> {{settings.sitesettings.CompanySettings.company_address}}</p>
        <p style="color: #fff;">
          <i class="fa fa-envelope mr-3"></i> {{settings.sitesettings.CompanySettings.company_email}}</p>
          {%for contact in settings.sitesettings.CompanySettings.company_phone.all%}
        <p style="color: #fff;">
          <i class="fa fa-phone mr-3"></i> {{contact.phone}}</p>
        <p>
          {%endfor%}
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->
  <!-- Copyright -->
  <div class="text-center py-3" style="color: white;">
    © 2020 Copyright:
    <a href="https://mdbootstrap.com/" style="color: white;"> google.com</a>    -->#this is not working.
  </div>
  </div>
  <!-- Copyright -->

</footer>

Это сбивает с толку, поскольку он работает в определенных столбцы, но не на других. Еще одна непонятная вещь заключается в том, что ссылки работают со ссылками на значки социальных сетей в мобильной области просмотра. Пожалуйста, помогите!