Question

我在IE10中遇到Bootstrap 4问题；我使用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

解决了！我省略了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 2

Bootstrap 4仅部分支持IE 10/11。根据{{3}}我可以使用...说，您的问题可能是“ justify-content”类，该类不被正确支持。尝试删除它们，看看是否能解决您的溢出问题。如果没有，请通知我们更改的内容。

Answer 3

我希望这对您有帮助，

<Redirect />

/*!
 * 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;
}

Answer 4

只需从上方的div中删除“ mr-auto”或“ m-auto”即可。

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent" >
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>

Bootstrap 4导航栏调整内容端在IE10中不起作用

4 个答案: