在移动菜单上对齐最后 3 个菜单项

Question

我的 Wordpress 主导航菜单中的最后 3 个项目是社交图标。我只想让这些项目在移动设备上对齐/水平对齐。

我尝试过浮动、显示内联、向 3 个菜单项添加类 d-display-inline 和 flex-direction，但图标保持垂直。

使用 Understrap 主题：

https://wrmission.com/home/

菜单代码（Understrap 主题）

<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;
}

Answer 1

试试这个：

.navbar-nav
{
   display: -webkit-box!important;
}