Html 导航栏小分辨率更改为两行

当我折叠导航栏时，它会一直转换为两行。我试着用CSS纠正它，我将在导航条形码后发布。不幸的是，这完全破坏了我的下拉菜单，并将其分解成比实际菜单按钮小的按钮。我是html/css新手，我是在过去四天里才学会的。我还尝试了另一种方法，在主navbar类中使用nowarp类，这也产生了平淡的结果

注：如果我能做到这一点，而不需要所有复杂的CSS，我会非常感激

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- Navigation Bar Menu Button for Smaller Resolutions -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-inner">
                    <!-- Logo -->
                    <a class="brand visible-xs-inline" href="index.html"> <img id="cherry" src="img/cheery3.svg"></a>
                    <!-- Small Resolution Navigation Label -->
                    <div class="navbar-right visible-xs-inline">
                        <ul class="nav navbar-nav">
                            <li><a id="nav-label" href="#">Navigation <span class="glyphicon glyphicon-arrow-right"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- General Links to Other Pages -->
            <div class="collapse navbar-collapse" id="example-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="visible-sm visible-md visible-lg"><a id="cherrybox" href="#"><img id="cherrytoo" src="img/cheery4.svg" alt=""></a></li>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="bitcoin/index.html">Bitcoin</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

---

我不完全确定你想要什么，但这是我最好的猜测。为此，我几乎将您的代码恢复为引导默认的导航栏。然后，我将组成切换按钮的3个水平条替换为单词“导航”和一个可选图标

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- Navigation Bar Menu Button for Smaller Resolutions -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
                  Navigation <span class="glyphicon glyphicon-th-large"></span>
                </button>

            </div>
            <!-- General Links to Other Pages -->
            <div class="collapse navbar-collapse" id="example-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="visible-sm visible-md visible-lg"><a id="cherrybox" href="#"><img id="cherrytoo" src="img/cheery4.svg" alt=""></a></li>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="bitcoin/index.html">Bitcoin</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

---

如果这不是您想要的，请更清楚地解释您想要什么，可能是问题的模型/图片。

您希望导航栏的外观如何？可能是将整个内容添加到边距：0自动；职位：相对帮助！

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- Navigation Bar Menu Button for Smaller Resolutions -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
                  Navigation <span class="glyphicon glyphicon-th-large"></span>
                </button>

            </div>
            <!-- General Links to Other Pages -->
            <div class="collapse navbar-collapse" id="example-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="visible-sm visible-md visible-lg"><a id="cherrybox" href="#"><img id="cherrytoo" src="img/cheery4.svg" alt=""></a></li>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="bitcoin/index.html">Bitcoin</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>