关于在XS显示器上内联下拉菜单的问题

Question

请您查看This Demo，并告诉我如何才能在list-inline显示屏上将下拉列表样式更改为Xs：

现在Standard Bootstrap提供的是这样的：

但我需要将它们排成一行，如

请告诉我如何仅在手机尺寸显示（xs）上执行此操作？

由于

Answer 1

为列表项提供类似.social-icon

的类

<li class="social-icon"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="social-icon"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="social-icon"><a href="#"><i class="fa fa-twitter"></i></a></li>

然后在inline-block

中制作它们和锚点

.navbar-nav .social-icon,
.navbar-nav .social-icon > a {
    display: inline-block;
}

DEMO