Bootstrap 3.3.7下拉列表不显示内联

Question

我想在移动设备上内联显示下拉元素，最好是在屏幕的整个宽度上。但是，我尝试在CSS中修复它但似乎无法使其工作。

对于CSS，我尝试将 li 标记为display: inline属性，但它没有效果。

<div class="col-lg-4 col-md-3 col-sm-3 col-xs-5">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand"><img src="images/logo.png" class="img-responsive" /></a>
    </div>
    <div class="collapse navbar-collapse" id="navCollapse">
        <ul class="nav nav-pills list-inline">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery<span class="caret"></span></a>
                <ul class="dropdown-menu list-inline">
                    <li><a href="#">Mercury-Earth</a></li>
                    <li><a href="#">Mars-Saturn</a></li>
                    <li><a href="#">Uranus-Pluto</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</div>