对于小屏幕尺寸，保持bootstrap nav ul元素的堆叠

Question

当我在xs屏幕尺寸上查看页面时，我希望导航结束时出现的两个链接保持在同一行。

我该怎么做？这是我的导航代码片段。

<div class="navbar navbar-inverse" style="margin-bottom: 0px;background-color:#f44336">
                <div class="navbar-header">
                    <button aria-controls="bs-navbar" aria-expanded="false"
                        class="collapsed navbar-toggle" style="float:left"
                        data-toggle="offcanvas" type="button">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <ul class="nav navbar-nav navbar-right" style="float:right">
                        <li>
                            <i class="zmdi zmdi-notifications zmdi-hc-lg zmdi-hc-fw"
                                style="color:white; padding-top: 10px;padding-right:32px"></i>
                        </li>
                        <li>
                            <i class="zmdi zmdi-account-circle zmdi-hc-lg zmdi-hc-fw"
                                style="color:white; padding-top: 10px;padding-right:32px"></i>
                        </li>
                    </ul>
                </div>
            </div>

谢谢，

丹

Answer 1

在li元素上使用display：inline解决了这个问题。