Html 如何使引导导航栏显示在xs布局中的一行上？

我有下面的引导导航栏，但当它显示在

xs

布局中时，我希望它显示在一行上。如何强制它显示在一行上而不中断。它显然有足够的空间

公司名称

公司名称



可以在xs屏幕上看到

可在sm屏幕上看到
在md屏幕上可以看到

在lg屏幕上可以看到

尝试将

向右拉

添加到这两个

类中，将类“向左拉”添加到导航栏标题中，如下所示…

还将类“向右拉”添加到两个下拉列表项中，如…

看

---

为了便于将来参考，只需使用中的navbar默认模板与您自己的代码进行比较，以发现错误

为此，您必须使用左拉右拉引导类

看我的

---

导航栏是全宽的，所以给那个类

向左拉

和其他

向右拉

但是你的内部菜单，它们也需要浮动才能进入一行，所以我给了它们两个浮动左和右，你得到了结果：）

有人能回答引导4这个问题吗？

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Company Name</a>
            </div>                
            <ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
                <li class="active"><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>                    
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Settings 1</a></li>
                        <li><a href="#">Settings 2</a></li>
                        <li><a href="#">Settings 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Settings A</a></li>
                        <li><a href="#">Settings B</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Menu A</a></li>
                        <li><a href="#">Menu B</a></li>
                        <li><a href="#">Menu C</a></li>
                    </ul>                        
                </li>
            </ul>

            <div style="display:none" class="navbar-collapse">
                <p class="navbar-text  fix_navbar_left_larger">Company Name</p>
                <p class="navbar-text fix_navbar_left_xs">Company Name</p>
                <p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
                <p class="navbar-text visible-sm-block visible-md-block visible-lg-block"><a href="#"></a></p>
                <a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
                    <span class="glyphicon glyphicon-menu-hamburger"></span>
                </a>
                <a class="navbar-brand navbar-brand navbar-right" href="#">
                    <span class="glyphicon glyphicon-cog"></span>
                </a>
            </div>                        
        </div>
    </nav>

    <div class="pagecontent">
        <p class="visible-xs-block">seen on xs screens.</p>
        <p class="visible-sm-block">seen on sm screens.</p>
        <p class="visible-md-block">seen on md screens.</p>
        <p class="visible-lg-block">seen on lg screens.</p>
    </div>

</div>