bootstrap 3折叠导航栏-展开时下拉标题超出屏幕

Question

我正在使用 bootstrap 3 中的默认折叠导航栏，但是当我调整浏览器窗口的大小或在移动设备上打开页面时，菜单将首先折叠并缩小为按钮，当我点击此按钮时展开菜单，所有菜单项都在左侧太远，因此您无法正确阅读它们，并且语言选择（只是一个标志）完全消失。我尝试了一些东西，比如 html 中的内联样式（左边距/填充、宽度、最大宽度等），我还尝试在我的引导 css 中删除 .navbar-nav 的负边距。我会附上截图，这是我的导航代码（当然它嵌套在容器 div 中）：

 <div class="row formRow">
        <div class="col-sm-12 searchCol">
            <form class="searchBox" action="/en/search.html" method="get">
                <div class="form-group" style="display:inline;">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" maxlength="2048">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="row">
    <div class="col-xs-12">
    <nav class="navbar navbar-default">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" ><!--aria-controls="navbar"-->
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="navbar-brand" href="/en/"><img class="img-responsive" src="/img/primeralogo.png" alt="Primera Technology Europe Logo"></a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav" style="padding: auto; max-width: 100%;">
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PRODUCTS</a>
                        <ul class="dropdown-menu">
                            <li><a href="/en/signature-slide-printer.html" class="has-submenu navitems">Slide Printer</a></li>
                            <li><a href="/en/signature-cassette-printer.html" class="navitems">Cassette Printer - Autoloader</a></li>
                            <li><a href="/en/signature-cassette-printer-manual.html" class="navitems">Cassette Printer - Manual</a></li>
                            <li><a href="/en/equipment.html" class="navitems">Medical IT Equipment</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/en/lx500e_features.html" class="navitems">LX500e Color Label Printer</a></li>
                            <li><a href="/en/disc_publisher.html" class="navitems">Disc Publishers</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/pdf/211275-Signature-Brochure-EN-A4.pdf" target="_blank" class="navitems">Product Brochure</a></li>                                
                          <li><a href="http://primeratrio.eu/" target="_blank" class="navitems">Portable All-in-One Printer</a></li>
                        </ul>
                    </li>
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SUPPORT</a>
                        <ul class="dropdown-menu">
                            <li><a href="/en/contact_tech_support.html" class="navitems">Contact Support</a></li>
                            <li><a href="/en/knowledgebase.html" class="navitems">Knowledge Base</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/en/registration.html" class="navitems">Product Registration</a></li>
                           <!-- <li><a href="/en/application-form.html" class="navitems">Sign up for training</a></li>-->
                            <li role="separator" class="divider"></li>
                            <li><a href="/en/slideprintersupport.html" class="navitems">Slide Printer</a></li>
                            <li><a href="/en/cassetteprintersupport.html" class="navitems">Cassette Printer</a></li>
                            <li><a href="/en/LISIntegration.html" class="navitems">LIS Integration</a></li>

                        </ul>
                    </li>
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">COMPANY</a>
                        <ul class="dropdown-menu">
                            <li><a href="/en/about.html" class="navitems">About Primera </a></li>
                            <li><a href="/en/press.html" class="navitems">Press</a></li>
                            <li><a href="/en/contact.html" class="navitems">Contact Primera </a></li>
                        </ul>
                    </li>
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="lang-sm" lang="en"></span></a>
                     <ul class="dropdown-menu"> <li><a href="/en/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="en"></span></a></li>
                      <li><a href="/de/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="de"></span></a></li>
                      <li><a href="/fr/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="fr"></span></a></li>
                      <!--<li><a href="/es/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="es"></span></a></li>-->
                      <li><a href="/nl/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="nl"></span></a></li>
                      <li><a href="/bg/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="bg"></span></a></li>
                      <li><a href="/cz/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="cz"></span></a></li>
                     </ul>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->

            </nav>
            </div>
            </div>

    <div class="row formRowBelow">
        <div class="col-sm-12 searchCol">
            <form class="searchBoxAlt" action="/en/search.html" method="get">
                <div class="form-group" style="display:inline;">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control"  value="" maxlength="2048">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </div>
            </form>
        </div>
    </div>

Screenshot of the problem

编辑：似乎如果窗口变得足够小（320 像素宽度），导航显示几乎正确。随着窗口变大，文本向左移动并“逐个字母”消失，直到它再次成为正常导航栏的断点

Answer 1

如果您使用的是 Chrome，那么这是我也遇到过的浏览器错误。从移动视图移动到不同的断点时，Chrome 有时会放大。尝试重置浏览器缩放级别 (Ctrl/Cmnd + 0)。

您的控制台中还有一个 JS 错误，您应该考虑解决。