ブートストラップ3は、ナビゲーションバーを崩壊 -

Question

を拡大したときに画面のうちのドロップダウンタイトルは、私は、ブートストラップ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

EDIT：窓が十分に小さいなればと思われる（320PXナビゲーションがほぼ正しく表示されます。ウィンドウが大きくなると、テキストは左に移動し、「文字の手紙」が通常のナビゲーションバーになるブレークポイントに達するまで消えます。

Answer 1

Chromeを使用している場合、これは私も経験しました。モバイルビューから別のブレークポイントに移動すると、Chromeがズームインすることがあります。ブラウザのズームレベル（Ctrl/Cmnd + 0）をリセットするだけです。

また、あなたが解決を検討してください、あなたのコンソールでのJSのエラーを持っています。