Уменьшение масштаба при переходе не 3ий bootstrap

208

05 декабря 2018, 18:10

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

Скриншот верстки с bootstrap3:

Скриншот верстки с bootstrap4:

В чем может быть проблема?

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: 'Gotham Pro', sans-serif; 
} 
 
@font-face { 
  font-family: 'Gotham Pro'; 
  src: url('../fonts/GothamPro-Bold.eot'); 
  src: url('../fonts/GothamPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro-Bold.woff2') format('woff2'), url('../fonts/GothamPro-Bold.woff') format('woff'), url('../fonts/GothamPro-Bold.ttf') format('truetype'), url('../fonts/GothamPro-Bold.svg#GothamPro-Bold') format('svg'); 
  font-weight: bold; 
  font-style: normal; 
} 
 
@font-face { 
  font-family: 'Gotham Pro'; 
  src: url('../fonts/GothamPro.eot'); 
  src: url('../fonts/GothamPro.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro.woff2') format('woff2'), url('../fonts/GothamPro.woff') format('woff'), url('../fonts/GothamPro.ttf') format('truetype'), url('../fonts/GothamPro.svg#GothamPro') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
} 
 
@font-face { 
  font-family: 'Gotham Pro'; 
  src: url('../fonts/GothamPro-Medium.eot'); 
  src: url('../fonts/GothamPro-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro-Medium.woff2') format('woff2'), url('../fonts/GothamPro-Medium.woff') format('woff'), url('../fonts/GothamPro-Medium.ttf') format('truetype'), url('../fonts/GothamPro-Medium.svg#GothamPro-Medium') format('svg'); 
  font-weight: 500; 
  font-style: normal; 
} 
 
@font-face { 
  font-family: 'Gotham Pro'; 
  src: url('../fonts/GothamPro-Light.eot'); 
  src: url('../fonts/GothamPro-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro-Light.woff2') format('woff2'), url('../fonts/GothamPro-Light.woff') format('woff'), url('../fonts/GothamPro-Light.ttf') format('truetype'), url('../fonts/GothamPro-Light.svg#GothamPro-Light') format('svg'); 
  font-weight: 300; 
  font-style: normal; 
} 
 
@font-face { 
  font-family: 'Font Awesome 5 Free'; 
  font-style: normal; 
  font-weight: 400; 
  src: url("../fonts/fa-regular-400.eot"); 
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); 
} 
 
.header__header-top { 
  background-color: #0c0f17; 
  padding: 0.5rem 0; 
} 
 
.header__navigation { 
  vertical-align: sub; 
  display: inline-block; 
} 
 
.header__navigation-item { 
  display: inline-block; 
} 
 
.header__navigation-item:not(:last-child) { 
  margin-right: 1.8rem; 
} 
 
.header__navigation-link { 
  font-size: 0.75rem; 
  color: #aeaeae; 
  text-decoration: none; 
  transition: 0.3s; 
} 
 
.header__navigation-link:hover { 
  color: #fff; 
  text-decoration: none; 
} 
 
.header__navigation-menu { 
  padding-left: 0; 
  list-style: none; 
  margin-bottom: 0; 
} 
 
.header__icon-box { 
  vertical-align: sub; 
  display: inline-block; 
} 
 
.header__icon-social { 
  text-decoration: none; 
  color: #aeaeae; 
  transition: 0.3s; 
  font-size: 18px; 
} 
 
.header__icon-social:hover { 
  color: #fff; 
  text-decoration: none; 
}

<header class="header"> 
  <div class="header__header-top"> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-lg-7"> 
          <nav class="header__navigation"> 
            <ul class="header__navigation-menu"> 
              <li class="header__navigation-item"> 
                <a href="#" class="header__navigation-link"> 
									Главная 
								</a> 
              </li> 
              <li class="header__navigation-item"> 
                <a href="#" class="header__navigation-link"> 
									Каталог 
								</a> 
              </li> 
              <li class="header__navigation-item"> 
                <a href="#" class="header__navigation-link"> 
									Акции и новости 
								</a> 
              </li> 
              <li class="header__navigation-item"> 
                <a href="#" class="header__navigation-link"> 
									Контакты 
								</a> 
              </li> 
              <li class="header__navigation-item"> 
                <a href="#" class="header__navigation-link"> 
									Оплата и доставка 
								</a> 
              </li> 
              <li class="header__navigation-item"> 
                <a href="#" class="header__navigation-link"> 
									Оптовый клиент 
								</a> 
              </li> 
            </ul> 
          </nav> 
        </div> 
        <div class="col-lg-2"> 
          <div class="header__icon-box"> 
            <a href="#" class="header__icon-social"> 
              <i class="fab fa-instagram"></i> 
            </a> 
            <a href="#" class="header__icon-social"> 
              <i class="fab fa-vk"></i> 
            </a> 
            <a href="#" class="header__icon-social"> 
              <i class="fab fa-youtube"></i> 
            </a> 
            <a href="#" class="header__icon-social"> 
              <i class="fab fa-odnoklassniki"></i> 
            </a> 
            <a href="#" class="header__icon-social"> 
              <i class="fab fa-telegram-plane"></i> 
            </a> 
          </div> 
        </div> 
        <div class="col-lg-3"> 
          <form method="GET" class="header__search-place"> 
            <input type="text" name="search" placeholder="Поиск" class="header__search-field"> 
            <button class="header__search-button"> 
							 
						</button> 
          </form> 
        </div> 
      </div> 
    </div> 
  </div> 
  <div class="header__contacts"> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-lg-2"> 
          <a href="index.html" class="logo-box"> 
            <img src="img/logo.png" alt="logotype" class="logo-box__logotype"> 
          </a> 
        </div> 
        <div class="col-lg-9 offset-lg-1"> 
          <div class="header__contact-box"> 
            <div class="header__contact-icon-box"> 
 
            </div> 
            <div class="header__contact-info"> 
              <h5 class="header__contact-name"> 
                Наш адрес 
              </h5> 
              <span class="header__contact-adress"> 
								г.Красноярск Красноярский <br /> рабочий 160/7 
							</span> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</header>