如何解决自定义折叠式导航栏2列，每列包含2列项目
我有一个自定义的折叠式引导导航栏。
未折叠，看起来像这样（注意我有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,.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和超棒的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还是很陌生，花了我很多时间弄清楚该如何做，所以我很高兴让它看起来不错，只是发现我们仍然需要支持4-10％的人们仍在使用IE11。
我尝试删除网格并用flex和flex-direction：列替换，其中flex：0 50％。这将适用于每个UL项目集，但会将每个项目都放在一行中。我可以添加容器或表格来获得2列，但随后它将使用相同的代码修改我的桌面版本。
在没有其他帮助的情况下，我认为我将不得不通过检测用户代理并显示正确的HTML / CSS，对非IE使用上述两种方法，然后对IE使用另一种方法。我真的希望有一个引导方法可以在所有浏览器（包括IE）中使用。
最重要的是，我希望有人可以帮助我调整CSS或HTML结构，并且无论是折叠还是未折叠，仍然能获得相同的结果。拥有这两列外观非常重要。
非常感谢您阅读所有这些内容以及可以提供的任何帮助。
解决方法
我尝试用您的示例代码测试问题，并且能够使用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,.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浏览器中的输出：
此外，您可以尝试根据自己的要求修改代码示例。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。