我的Wordpress主导航菜单中的最后3个项目是社交图标。我只想让这些项目在移动设备上内联/水平对齐。
我已经尝试过浮动，内联显示，将类d-display-inline和flex-direction添加到3个菜单项中，但图标保持垂直。
使用底带主题：
https://wrmission.com/home/
菜单代码(底带主题(
<ul id="main-menu" class="navbar-nav ml-auto"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50 nav-item"><a title="Area" href="#" class="nav-link">Area</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51 nav-item"><a title="Project Story" href="#" class="nav-link">Project Story</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52 nav-item"><a title="Plans" href="#" class="nav-link">Plans</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53 nav-item"><a title="Interiors" href="#" class="nav-link">Interiors</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54 nav-item"><a title="Amenities" href="#" class="nav-link">Amenities</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55 nav-item"><a title="Developer" href="#" class="nav-link">Developer</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56 nav-item"><a title="News" href="#" class="nav-link">News</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-62" class="mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-62 nav-item"><a title="Registration" href="#" class="nav-link">Registration</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-66" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-66 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-facebook"></i></a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-67" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-67 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-twitter"></i></a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-68" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-68 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-instagram"></i></a></li>
</ul>
.CSS：
.navbar-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-expand-md .navbar-nav .social-inline {
border-bottom: none;
display: inline-block!important;
width: 10%!important;
float: left!important;
white-space: nowrap!important;
}
试试这个：
.navbar-nav
{
display: -webkit-box!important;
}