我使用bootstrap 3中的默认折叠导航栏，但是当我调整浏览器窗口大小或在移动设备上打开页面时，菜单将首先崩溃并减少到只有按钮，当我点击此按钮时按钮展开菜单，所有菜单项都在左侧太远，所以你无法正确阅读它们，语言选择（只是一个标志）完全消失。我尝试了一些内容，如html中的内联样式（左边距/填充，宽度，最大宽度等），我还尝试在我的bootstrap 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>
编辑：似乎如果窗口变得足够小（320px宽度），导航显示几乎正确。当窗口变大时，文本向左移动并消失＆＃34;字母为＃34;直到它再次成为普通导航栏的突破点
答案 0 :(得分：0)
如果您使用的是Chrome，那么这也是我遇到过的浏览器错误。从移动视图移动到其他断点时，Chrome有时会放大。请尝试重置浏览器缩放级别（Ctrl / Cmnd + 0）。
您的控制台中也有一个JS错误，您应该考虑解决。
