html - 如何增加将导航栏更改为汉堡包图标的大小

Question

我有一个非常完整的导航栏。当我将窗口画得更小时，在汉堡包图标出现之前，导航栏首先分成两行。同样在我的安卓手机上，我的导航栏有 3 行，而不是汉堡图标

我非常不知道如何更改它(通常它应该单独在手机上更改)，也没有在这里找到帮助。

我的 html:

    <nav class="navbar navbar-default navbar-fixed-top" id="newnav">
        <div class="container-fluid">
          <!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Navigation ein-/ausblenden</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="Titel" src="...">
                </a>

            </div>



            <!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">
                    <li class="active"><a href="de/index.html">Willkommen <span class="sr-only">(aktuell)</span></a></li>
                    <li><a href="de/kandidatinnen.html">Kandidatinnen</a></li>
                    <li><a href="de/mentalitaet.html">Mentalität</a></li>
                    <li><a href="de/service.html">Services und Preise</a></li>
                    <li><a href="de/anmeldung_damen.html">Anmeldung für Damen</a></li>
                    <li><a href="de/anmeldung_herren.html">Anmeldung für Herren</a></li>
                    <li>
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" style="margin-top:5%;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                Sprache (language)
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a href="de/index.html">Deutsch (German)</a></li>
                                <li><a href="en/index.html">Englisch (English)</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="impressum.html">Impressum</a></li>
                    <li class="dropdown">
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

汉堡包的尺寸已经太小了。只是不知道我必须改变什么

Answer 1

对于 Bootstrap 4

要更改为不同的断点，我们只需要添加何时使用其中之一扩展导航栏。

navbar-expand = never collapses vertically (remains horizontal)
navbar-expand-sm = collapses below sm widths <576px
navbar-expand-md = collapses below md widths <768px
navbar-expand-lg = collapses below lg widths <992px
navbar-expand-xl = collapses below xl widths <1200px

<nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link text-truncate" href="#">Never Collapse</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</nav>

查看此代码以查看不同的 Navbar 断点:

https://www.codeply.com/go/imngr08QRi