Html 自定义折叠导航栏（2列，每列包含2列项目）

我有一个自定义折叠引导导航栏

没有折叠，看起来是这样的（注意我有两套；第一套是菜单项，第二套是社交媒体图标） . 到目前为止一切都很好。适用于包括IE11在内的所有浏览器

这是它折叠的样子（请再次注意这两组）

然而，这就是IE11中的情况

当倒塌时，我要选择的结构是2根柱子。一列用于菜单项，一列用于社交图标。每列进一步分为两列，其中项目1和项目2位于同一行，然后项目3和项目4位于下一行，等等。与社交媒体图标相同

从下面我的CSS中可以看出，我能找到的唯一方法（考虑到我的CSS新手经验）是使用网格，但当然IE11似乎不喜欢这样。我使用了这个网站

    /* General */
    body,html,input {
      font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif
    }
    code,kbd,pre { font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace }
    
    /* Navigation Bar */
    .navbar {
      margin: 0 auto;
      border-bottom: 1px solid #d6d6d6;
      padding: 0;
      background-color: white;
    }
    
    /* Navigation bar centering with width */
    .navbar .container {
      max-width: 1200px;
    }
    .navbar .container .navbar-header {
    }
    
    /* Navigation bar logo size */
    .navbar img {
      height: 17px;
      margin-bottom: 4px;
    }
    
    /* Navigation bar desktop and collapsed menu */
    .navbar-collapse {
    }
    
    /* Navigation bar */
    .navbar-nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
    }
    
    /* Navigation item. */
    .nav-item i {
      font-size: 18px;
      color: black;
    }
    
    /* Navigation group left padding */
    .navbar-nav-left {
      margin-left: 10px;
    }
    
    /* Links */
    .nav-link {
      white-space: nowrap;
    }
    
    /* Hamburger Menu */
    .navbar-light .navbar-toggler {
      color: rgba(0,0,0,.5);
      vertical-align: middle;
      border: none; 
    }
    .navbar-toggler {
      padding: 0.25rem 0;
    }
    .navbar-toggler:active,
    .navbar-toggler:focus {
      outline: 0;
    }
    .navbar-toggler .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      margin: 4px 0 4px 0;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    .navbar-light .navbar-toggler .icon-bar {
      background: black
    }
    
    /* Optional hamburger menu animation from bars to close. */
    .navbar-toggler .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-transform-origin: 10% 10%;
          -ms-transform-origin: 10% 10%;
              transform-origin: 10% 10%;
    }
    
    .navbar-toggler .icon-bar:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }
    
    .navbar-toggler .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-transform-origin: 10% 90%;
          -ms-transform-origin: 10% 90%;
              transform-origin: 10% 90%;
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
    
    /* Navigation items hover active etc */
    .navbar .nav-item.show > a {
      background: none !important;
    }
    .navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus {
      color: black !important;
    }
    .navbar .navbar-nav a.active, .navbar .navbar-nav a.active:hover {
      color: black !important;
      background: transparent !important;
    }
    
    /* If the width is not at least as wide as desktop, ..
    - Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
    - Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
    - Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
    - Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
       Collapse menu layout, animation, and separation. 
    */
    @media (max-width: 991.98px) {
      .navbar {
        padding-left: 16px;
        padding-right: 16px;
      }
      .navbar img {
        vertical-align: middle;
        margin-bottom: 0px;
      }
      .navbar-collapse {
        border-top: 1px solid #d6d6d6;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        -ms-grid-columns: 3fr 1fr;
        grid-template-columns: 3fr 1fr;
        padding-top: 5px;
        padding-bottom: 5px;
      }
      .navbar-collapse > *:nth-child(1) {
            -ms-grid-row:1;
            -ms-grid-column:1;
      }
      .navbar-collapse > *:nth-child(2) {
            -ms-grid-row:1;
            -ms-grid-column:2;
      }
      .navbar-nav .nav-link {
        padding: 0;
      }
      .navbar-nav {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 10px 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
      }
      .navbar-nav-left {
        margin-left: 0px;
      }
      .navbar-nav-right {
        justify-items: center;
        list-style: none;
        margin-left: 0!important;
      }
      .nav-link.nav-link-social i {
        font-size: 28px;
      }
    }
    
    /* Content default offset to make content visible */
    /* This is dynamically recalculated as needed. */
    /* We also hide any horizontal overflow due to swiping. */
    .content {
      padding-top: 169px;
      overflow-x: hidden;
      position: relative;
      width: 100%;
    }

这是使用Bootstrap4.5.0和FontAwesome4.7.0的相关html-

<div class="fixed-top" id="header">
   <div class="navbar navbar-light navbar-expand-lg ml-auto">
      <div class="container">
         <button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="navbar" aria-expanded="true">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-header">
           <a id="navbar-brand" class="navbar-brand navbar-right" href="#"><img src="img/logo/logo-2.svg"></a>
         </div>
         <div id="navbar" class="navbar-collapse collapsable collapse show">
            <ul class="nav navbar-nav navbar-nav-left">
               <li class="nav-item">
                  <a class="nav-link nav-link-header" title="Store" href="/">
                     <i class="fa fa-shopping-cart"></i> Store</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-header" title="Support" href="/support">
                     <i class="fa fa-wrench"></i> Support</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-header" style="cursor:pointer;" title="Contact Us" data-toggle="modal" data-target="#contact_us">
                     <i class="fa fa-envelope-o"></i> Contact Us</a>
               </li>
            </ul>
            <ul class="nav navbar-nav navbar-nav-right ml-auto">
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="Facebook" href="https://www.facebook.com/" target="_blank">
                     <i class="fa fa-facebook"></i></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="Twitter" href="https://twitter.com/" target="_blank">
                     <i class="fa fa-twitter"></i></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="Instagram" href="https://www.instagram.com//" target="_blank">
                     <i class="fa fa-instagram"></i></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="YouTube" href="https://www.youtube.com/" target="_blank">
                     <i class="fa fa-youtube-play"></i></a>
               </li>
            </ul>
          </div>
        </div>
      </div>

我对CSS和HTML非常陌生，我花了很多时间才弄明白如何做到这一点，所以我很高兴看到它看起来不错，但发现我们仍然需要支持4-10%仍在使用IE11的用户

我尝试删除网格，并用flex和flex-direction:column替换，用flex:050%替换。这将适用于每个UL项目集，但它将每个项目集作为一行。我可以添加容器或表来获得2列，但它会使用相同的代码破坏我的桌面版本

如果没有任何进一步的帮助，我想我将不得不使用两种方法，上面的方法用于非IE，然后是IE的替代方法，通过检测用户代理并显示正确的HTML/CSS。我真的希望有一种引导方法可以做到这一点，它可以在包括IE在内的所有浏览器中工作

底线是，我希望有人能帮助我调整我的CSS或HTML结构，在折叠和非折叠中仍然能得到相同的结果。这是非常重要的，它有这个2栏看看它

---

非常感谢您阅读所有这些以及您可以提供的任何帮助。

我尝试使用您的示例代码测试问题，并且我能够使用IE 11浏览器产生问题

要解决IE浏览器的问题，我们需要在

网格行

和

网格列

中设置每个元素

例如：

.cellA 
{
      -ms-grid-row:1;
      -ms-grid-column:1;
}

<li class="nav-item cellA">
    <a class="nav-link nav-link-header" title="Store" href="/">
    <i class="fa fa-shopping-cart"></i> Store</a>
</li>

HTML:

IE 11浏览器中的输出：

---

此外，您可以尝试根据自己的要求修改代码示例。

我试图实现每个单元格的某种自动化，这让我蒙蔽了双眼，以至于我从未承认单元格坐标可以硬编码。这些内容实际上是生成的，因此如果需要，我仍然可以自动创建这些内容。谢谢@Deepak MSFT。我真的很感谢你抽出时间来做这件事，我的朋友。祝你一切顺利。

/* General */
    body,html,input {
      font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif
    }
    code,kbd,pre { font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace }
    
    /* Navigation Bar */
    .navbar {
      margin: 0 auto;
      border-bottom: 1px solid #d6d6d6;
      padding: 0;
      background-color: white;
    }
    
    /* Navigation bar centering with width */
    .navbar .container {
      max-width: 1200px;
    }
    .navbar .container .navbar-header {
    }
    
    /* Navigation bar logo size */
    .navbar img {
      height: 17px;
      margin-bottom: 4px;
    }
    
    /* Navigation bar desktop and collapsed menu */
    .navbar-collapse {
    }
    
    /* Navigation bar */
    .navbar-nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
    }
    
    /* Navigation item. */
    .nav-item i {
      font-size: 18px;
      color: black;
    }
    
    /* Navigation group left padding */
    .navbar-nav-left {
      margin-left: 10px;
    }
    
    /* Links */
    .nav-link {
      white-space: nowrap;
    }
    
    /* Hamburger Menu */
    .navbar-light .navbar-toggler {
      color: rgba(0,0,0,.5);
      vertical-align: middle;
      border: none; 
    }
    .navbar-toggler {
      padding: 0.25rem 0;
    }
    .navbar-toggler:active,
    .navbar-toggler:focus {
      outline: 0;
    }
    .navbar-toggler .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      margin: 4px 0 4px 0;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    .navbar-light .navbar-toggler .icon-bar {
      background: black
    }
    
    /* Optional hamburger menu animation from bars to close. */
    .navbar-toggler .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-transform-origin: 10% 10%;
          -ms-transform-origin: 10% 10%;
              transform-origin: 10% 10%;
    }
    
    .navbar-toggler .icon-bar:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }
    
    .navbar-toggler .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-transform-origin: 10% 90%;
          -ms-transform-origin: 10% 90%;
              transform-origin: 10% 90%;
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
    
    /* Navigation items hover active etc */
    .navbar .nav-item.show > a {
      background: none !important;
    }
    .navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus {
      color: black !important;
    }
    .navbar .navbar-nav a.active, .navbar .navbar-nav a.active:hover {
      color: black !important;
      background: transparent !important;
    }
    
    /* If the width is not at least as wide as desktop, ..
    - Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
    - Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
    - Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
    - Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
       Collapse menu layout, animation, and separation. 
    */
    @media (max-width: 991.98px) {
      .navbar {
        padding-left: 16px;
        padding-right: 16px;
      }
      .navbar img {
        vertical-align: middle;
        margin-bottom: 0px;
      }
      .navbar-collapse {
        border-top: 1px solid #d6d6d6;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        -ms-grid-columns: 3fr 1fr;
        grid-template-columns: 3fr 1fr;
        padding-top: 5px;
        padding-bottom: 5px;
      }
      .navbar-collapse > *:nth-child(1) {
            -ms-grid-row:1;
            -ms-grid-column:1;
      }
      .navbar-collapse > *:nth-child(2) {
            -ms-grid-row:1;
            -ms-grid-column:2;
      }



      .cellA {
            -ms-grid-row:1;
            -ms-grid-column:1;
      }
      .cellB {
            -ms-grid-row:1;
            -ms-grid-column:2;
      }
      .cellC {
            -ms-grid-row:2;
            -ms-grid-column:1;
      }
      .cellD {
            -ms-grid-row:1;
            -ms-grid-column:3;
      }
      .cellE {
            -ms-grid-row:1;
            -ms-grid-column:4;
      }
      .cellF {
            -ms-grid-row:2;
            -ms-grid-column:3;
      }
      .cellG {
            -ms-grid-row:2;
            -ms-grid-column:4;
      }
    
    
      .navbar-nav .nav-link {
        padding: 0;
      }
      .navbar-nav {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 10px 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
      }
      .navbar-nav-left {
        margin-left: 0px;
      }
      .navbar-nav-right {
        justify-items: center;
        list-style: none;
        margin-left: 0!important;
      }
      .nav-link.nav-link-social i {
        font-size: 28px;
      }
    }
    
    /* Content default offset to make content visible */
    /* This is dynamically recalculated as needed. */
    /* We also hide any horizontal overflow due to swiping. */
    .content {
      padding-top: 169px;
      overflow-x: hidden;
      position: relative;
      width: 100%;
    }

<div class="fixed-top" id="header">
   <div class="navbar navbar-light navbar-expand-lg ml-auto">
      <div class="container">
         <button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="navbar" aria-expanded="true">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-header">
           <a id="navbar-brand" class="navbar-brand navbar-right" href="#"><img src="test.ico"></a>
         </div>
         <div id="navbar" class="navbar-collapse collapsable collapse show">
            <ul class="nav navbar-nav navbar-nav-left">
               <li class="nav-item cellA">
                  <a class="nav-link nav-link-header" title="Store" href="/">
                     <i class="fa fa-shopping-cart"></i> Store</a>
               </li>
               <li class="nav-item cellB">
                  <a class="nav-link nav-link-header" title="Support" href="/support">
                     <i class="fa fa-wrench"></i> Support</a>
               </li>
               <li class="nav-item cellC">
                  <a class="nav-link nav-link-header" style="cursor:pointer;" title="Contact Us" data-toggle="modal" data-target="#contact_us">
                     <i class="fa fa-envelope-o"></i> Contact Us</a>
               </li>
            </ul>
            <ul class="nav navbar-nav navbar-nav-right ml-auto">
               <li class="nav-item cellD">
                  <a class="nav-link nav-link-social" title="Facebook" href="https://www.facebook.com/" target="_blank">
                     <i class="fa fa-facebook"></i></a>
               </li>
               <li class="nav-item cellE">
                  <a class="nav-link nav-link-social" title="Twitter" href="https://twitter.com/" target="_blank">
                     <i class="fa fa-twitter"></i></a>
               </li>
               <li class="nav-item cellF">
                  <a class="nav-link nav-link-social" title="Instagram" href="https://www.instagram.com//" target="_blank">
                     <i class="fa fa-instagram"></i></a>
               </li>
               <li class="nav-item cellG">
                  <a class="nav-link nav-link-social" title="YouTube" href="https://www.youtube.com/" target="_blank">
                     <i class="fa fa-youtube-play"></i></a>
               </li>
            </ul>
          </div>
        </div>
      </div>