Bootstrap 4 navbar justify-content-end не работает в IE10

Question

У меня проблемы с Bootstrap 4 в IE10;Я сделал навигационную панель со ссылкой на номер телефона / ссылку справа, используя justify-content-end, которая прекрасно работает, пока я не проверил ее в IE10, веб-сайт должен работать именно на IE10, поэтому это проблема.Код выглядит следующим образом:

<nav class="navbar navbar-expand-md navbar justify-content-center bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse w-100 justify-content-center ml-5" id="navbar">
    <a class="nav-item nav-link text-white link" href="home">Home</a>
    <a class="nav-item nav-link text-white link" href="#">#</a>
    <a class="nav-item nav-link text-white link" href="tool">Tool</a>
    <a class="nav-item nav-link text-white link" href="contact">Contact</a>
    <a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>      
<div class="navbar-collapse collapse justify-content-end">
    <a href="tel:+0123456789">
        <i class="fas fa-phone text-white"></i>
    </a>
    <a href="https://www.linkedin.com/">
        <i class="fab fa-linkedin text-white ml-2"></i>
    </a>
</div>

Проблема в том, что панель навигации просто обрезается в правом конце страницы, после этого это просто белый фон и синий квадрат.

Answer 1

Надеюсь, это поможет вам,

/*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014-2017 The Bootstrap Authors
 * Copyright 2014-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// See the Getting Started docs for more information:
// https://getbootstrap.com/getting-started/#support-ie10-width

(function () {
  'use strict'

  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement('style')
    msViewportStyle.appendChild(
      document.createTextNode(
        '@-ms-viewport{width:auto!important}'
      )
    )
    document.head.appendChild(msViewportStyle)
  }

}())

body {
  padding-top: 2rem;
}

.container {
  padding-bottom: 1.5rem;
}

.bd-example {
  padding: 1.5rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  border-width: .2rem;
  margin: 1rem -15px;
  border: solid #f7f7f9;
}

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Horizontal: Base Nav</h2>
      <div class="bd-example">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Horizontal: Justify Content Center</h2>
      <div class="bd-example">
        <ul class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Horizontal: Justify Content End</h2>
      <div class="bd-example">
        <ul class="nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Vertical: Flex Column</h2>
      <div class="bd-example">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Base Nav: Tabs</h2>
      <div class="bd-example">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Base Nav: Pills</h2>
      <div class="bd-example">
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Base Nav: Fill and justify</h2>
      <div class="bd-example">
        <ul class="nav nav-pills nav-fill">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 2

Исправлено!Я опустил класс w-100 и изменил justify-content-center на justify-content-end:

<nav class="navbar navbar-expand-md navbar bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse justify-content-end ml-5" id="navbar">
    <a class="nav-item nav-link text-white link" href="home">Home</a>
    <a class="nav-item nav-link text-white link" href="#">#</a>
    <a class="nav-item nav-link text-white link" href="tool">Tool</a>
    <a class="nav-item nav-link text-white link" href="contact">Contact</a>
    <a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>      
<div class="navbar-collapse collapse justify-content-end">
    <a href="tel:+0123456789">
        <i class="fas fa-phone text-white"></i>
    </a>
    <a href="https://www.linkedin.com">
        <i class="fab fa-linkedin text-white ml-2"></i>
    </a>
</div>

Answer 3

Bootstrap 4 только частично поддерживает IE 10/11.Вашей проблемой здесь могут быть классы "justify-content", которые, согласно this Can I Use ... не поддерживаются должным образом.Попробуйте удалить их и посмотрите, подходит ли это для вашей проблемы переполнения.Если нет, пожалуйста, сообщите нам о том, что изменилось.