Bootstrap ошибка выравнивания, возникающая только в inte rnet explorer - PullRequest
0 голосов
/ 24 марта 2020

У меня ошибка на моем веб-сайте, возникающая только в Inte rnet Explorer, и я не могу найти способ ее исправить. Я уже проверил, есть ли в моем коде незакрытые элементы.

В Chrome элементы выровнены правильно: введите описание изображения здесь

и в Inte rnet проводник, элементы скрывают друг друга введите описание изображения здесь

Это мой HTML код

  <div  class="hellgrau">
      <div class="kontaktcontainer container d-flex justify-content-center">
        <div class="row">
          <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
            <i class="icon fa fa-phone fa-3x"></i>
            <h2>Telefon</h2>
              <hr class="pg-titl-bdr-btm">
                <p class="kontaktbereich"> Tel: 0211 - 205 444 80 <br> Fax:0211 - 205 444 81 </p>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
              <i class="icon text-center fa fa-envelope fa-3x"></i>

              <h2> Mail</h2>
                <hr class="pg-titl-bdr-btm">
                <a href="mailto:kontakt@mabs40.com?subject= TISAX Beratung">
                  <p class="kontaktbereich"> kontakt@mabs40.com <br>  </p>
                </a>
              </div>
              <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
                <i class="icon fa fa-map-marker fa-3x"></i>
                <h2> Adresse</h2>
                  <hr class="pg-titl-bdr-btm">
              <p class="kontaktbereich">Großenbaumer Weg 8 <br> 40472 Düsseldorf</p>
                </div>
          </div>
        </div>
      </div>

и это мой CSS:

.kontakt{
    padding-left: 80px;
    padding-right: 80px;
}

1 Ответ

0 голосов
/ 25 марта 2020

Проблема связана с Bootstrap Flex , попробуйте удалить « d-flex »:

  <div  class="hellgrau">
      <div class="kontaktcontainer container justify-content-center">
        <div class="row">
          <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
            <i class="icon fa fa-phone fa-3x"></i>
            <h2>Telefon</h2>
              <hr class="pg-titl-bdr-btm">
                <p class="kontaktbereich"> Tel: 0211 - 205 444 80 <br> Fax:0211 - 205 444 81 </p>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
              <i class="icon text-center fa fa-envelope fa-3x"></i>

              <h2> Mail</h2>
                <hr class="pg-titl-bdr-btm">
                <a href="mailto:kontakt@mabs40.com?subject= TISAX Beratung">
                  <p class="kontaktbereich"> kontakt@mabs40.com <br>  </p>
                </a>
              </div>
              <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
                <i class="icon fa fa-map-marker fa-3x"></i>
                <h2> Adresse</h2>
                  <hr class="pg-titl-bdr-btm">
              <p class="kontaktbereich">Großenbaumer Weg 8 <br> 40472 Düsseldorf</p>
                </div>
          </div>
        </div>
      </div>

Результат выглядит так:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...