自定义折叠导航栏（2 列，每列包含 2 列项目）
Custom collapsed navbar (2 columns, with each column containing 2 columns of items)
我有一个自定义折叠的 bootstrap 导航栏。
未折叠它看起来像这样（注意我有 2 套；第 1 套是菜单项，第 2 套是社交媒体图标）
normal。到目前为止一切都很好。适用于所有浏览器，包括 IE11。
这是折叠起来的样子（再次注意2套）collapsed。
然而，这就是它在 IE11 中的样子 collapsed-ie11。
折叠时我要使用的结构是 2 列。一栏用于菜单项，一栏用于社交图标。每列进一步拆分为 2 列，其中 item1 和 item2 在同一行，然后 item3 和 item4 在下一行，依此类推。与社交媒体图标相同。
正如您在下面的 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%;
}
这是使用 bootstrap 4.5.0 和 font-awesome 4.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 的新手，我花了很多时间才弄清楚如何做到这一点，所以我很高兴得到这个看起来不错只是发现我们仍然需要支持仍在使用 IE11 的 4-10% 的人。
我尝试删除网格并替换为 flex 和 flex-direction: column, with flex: 0 50%。这将适用于每组 UL 项目，但它将每组作为一行。我可以添加容器或 table 以获得 2 列，但它会使用相同的代码搞砸我的桌面版本。
如果没有任何进一步的帮助，我想我将不得不使用 2 种方法，上面的方法用于非 IE，然后通过检测用户代理并显示正确的 IE 来替代 IE HTML/CSS。我真的希望有一个 bootstrap 方法可以做到这一点，它适用于包括 IE 在内的所有浏览器。
底线是，我希望有人可以帮助我调整我的 CSS 或 HTML 结构，并且在折叠和非折叠中仍然得到相同的结果。这 2 列看起来很重要。
非常感谢您阅读所有这些内容以及您可以提供的任何帮助。
我尝试使用您的示例代码测试问题，并且能够使用 IE 11 浏览器生成问题。
要解决 IE 浏览器的问题，我们需要设置 grid-row 和 grid-column 中的每个元素。
例如：
.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>
下面是完整的修改代码：
CSS:
/* 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%;
}
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="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>
在 IE 11 浏览器中输出：
另外，您可以根据自己的需求尝试修改代码示例。
我有一个自定义折叠的 bootstrap 导航栏。
未折叠它看起来像这样（注意我有 2 套；第 1 套是菜单项，第 2 套是社交媒体图标） normal。到目前为止一切都很好。适用于所有浏览器，包括 IE11。
这是折叠起来的样子（再次注意2套）collapsed。
然而，这就是它在 IE11 中的样子 collapsed-ie11。
折叠时我要使用的结构是 2 列。一栏用于菜单项，一栏用于社交图标。每列进一步拆分为 2 列，其中 item1 和 item2 在同一行，然后 item3 和 item4 在下一行，依此类推。与社交媒体图标相同。
正如您在下面的 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%;
}
这是使用 bootstrap 4.5.0 和 font-awesome 4.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 的新手，我花了很多时间才弄清楚如何做到这一点，所以我很高兴得到这个看起来不错只是发现我们仍然需要支持仍在使用 IE11 的 4-10% 的人。
我尝试删除网格并替换为 flex 和 flex-direction: column, with flex: 0 50%。这将适用于每组 UL 项目，但它将每组作为一行。我可以添加容器或 table 以获得 2 列，但它会使用相同的代码搞砸我的桌面版本。
如果没有任何进一步的帮助，我想我将不得不使用 2 种方法，上面的方法用于非 IE，然后通过检测用户代理并显示正确的 IE 来替代 IE HTML/CSS。我真的希望有一个 bootstrap 方法可以做到这一点，它适用于包括 IE 在内的所有浏览器。
底线是，我希望有人可以帮助我调整我的 CSS 或 HTML 结构，并且在折叠和非折叠中仍然得到相同的结果。这 2 列看起来很重要。
非常感谢您阅读所有这些内容以及您可以提供的任何帮助。
我尝试使用您的示例代码测试问题，并且能够使用 IE 11 浏览器生成问题。
要解决 IE 浏览器的问题，我们需要设置 grid-row 和 grid-column 中的每个元素。
例如：
.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>
下面是完整的修改代码：
CSS:
/* 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%;
}
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="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>
在 IE 11 浏览器中输出：
另外，您可以根据自己的需求尝试修改代码示例。