避免 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 解决了问题。

避免 bootstrap nav ul 元素在小屏幕尺寸下堆叠

Keep bootstrap nav ul elements from stacking for small screen sizes

nav

twitter-bootstrap-3