ブートストラップナビゲーションバー-崩壊は、私はこのコード（ブートストラップとPHPとHTML5）を持っており、このナビゲーションバーはモバイルに表示されたとき、私はいくつかの問題を抱えているナビゲーションアイテム

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar navbar-default" role="navigation"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t \t <div class="navbar-header navbar-right"> 
 
\t \t \t \t <span class="hidden-lg hidden-md" style="padding:8px; color:gray; font-size:20px;"> 
 
\t \t \t \t \t תפריט 
 
\t \t \t \t </span> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
 
\t \t \t \t \t \t data-target="#toggle" aria-expanded="false"> 
 
\t \t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t <div class="collapse navbar-collapse navbar-right" id="toggle"> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t <li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span> 
 
\t \t \t \t \t \t \t \t <span class="badge badge-error">0</span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </a></li> 
 
\t \t \t \t \t \t \t <li><a href="journalism.php">קטעי עיתונות</a></li> 
 
\t \t \t \t \t \t \t <li><a href="qna.php">שאלות נפוצות</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ערכות מומלצות<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t \t <li class='text-right'><a href='kits.php?id=1'>עור רפווי וקמטים</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=2'>היפר פיגמנטציה וכתמי עור</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=3'>עור יבש וחסר לחות</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=4'>עור עייף וחסר חיוניות וזוהר</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=5'>עור רגיש ואדמומי</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=6'>מצבי עור מיוחדים: אקזמה עור מגורה סימניה מתיחה חשיפה לשמש ועוד</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=7'>עור שמן\מעורב התפרצויות של פצעונים\אקנה</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li> \t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t \t <li><a href="thestorybehind.php">הסיפור שמאוחרי המותג</a></li> 
 
\t \t \t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">מוצרים<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t \t \t <li class='text-right'><a href='product.php?id=1'>שמן מרוכז רב תכליתי לפנים ולגוף</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=2'>קרם ג’ל עם אפקט מתיחה מיידי</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=3'>ג'ל ניקוי מטהר ומרענן לניקוי העור</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=4'>מי פנים מרעננים להרגעת ולטיהור העור</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=5'>סרום ליפט למיצוק העור ולתוספת לחות</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=6'>קרם פנים משקם רב תכליתי(Regenerating)</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=7'>קרם רב תכליתי למיצוק ולמתיחת העור באופן טבעי(Anti-Aging)</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=8'>קרם עיניים למראה צעיר ורענן</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li role='separator' class='divider' style='background-color:darkgray;'></li> \t \t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li><a href="index.php">ראשי</a></li> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar navbar-default" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header navbar-right"> 
      <span class="hidden-lg hidden-md" style="padding:8px; color:gray; font-size:20px;"> 
       תפריט 
      </span> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#toggle" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
       <div class="collapse navbar-collapse navbar-right" id="toggle"> 
        <ul class="nav navbar-nav"> 
         <li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span> 
          <?php if(isset($_SESSION['cart']) && $_SESSION['cart']): ?> <span class="badge badge-right"><?php echo count($_SESSION['cart']) ?></span> 
          <?php else: ?> <span class="badge badge-error">0</span> 
          <?php endif; ?> 
         </a></li> 
         <li><a href="journalism.php">קטעי עיתונות</a></li> 
         <li><a href="qna.php">שאלות נפוצות</a></li> 
        </ul> 
        <ul class="nav navbar-nav"> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ערכות מומלצות<span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <?php 
            $kits = get_kits(); 
            if($kits) 
             foreach($kits as $kit) 
              echo "<li class='text-right'><a href='kits.php?id=".$kit->get_id()."'>".$kit->get_name()."</a></li> 
               <li role='separator' class='divider' style='background-color:darkgray;'></li>"; 
           ?> 
          </ul> 
          <li><a href="thestorybehind.php">הסיפור שמאוחרי המותג</a></li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">מוצרים<span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <?php 
             $products = get_products(); 
             foreach($products as $prod) 
              echo "<li class='text-right'><a href='product.php?id=".$prod->get_id()."'>".$prod->get_name()."</a></li> 
               <li role='separator' class='divider' style='background-color:darkgray;'></li>"; 
            ?> 
           </ul> 
          </li> 
          <li><a href="index.php">ראשי</a></li> 
         </li> 
        </ul> 
       </div> 
     </div> 
    </div> 

の向きを変えています。 モバイルでこれを見ると、リンクが間違った場所にあることがわかります。例：

リンク1 |リンク2 |それはこのように表示されるモバイル上のリンク3

：

リンク3 リンク2 リンク1

の代わりに：

リンク1つの リンク2 リンク3

私の「メイン」リンクが最後になり、最後のリンクが最初になり、それが私の望むものではありません。

Answer 1

要素に1つの要素のみを使用できますか？同じ機能を持つ2つのdivを追加する理由はありません。

エラーがあなたのCSSファイルに関連していると仮定しています。あなたのブートストラップ構造が問題であるからです。おそらくRTLの方向などを使用している場合ですか？

---

ここに解決策があります。あなたのリストの順序を逆にしないで、このような標準レイアウトを作成し、あなたのCSSコードにリンクを浮動させてください。

CSS

.navbar-nav>li { 
    float: right; 
} 

HTML

 <div class="collapse navbar-collapse navbar-right" id="toggle"> 
       <ul class="nav navbar-nav"> 
         <li><a href="index.php">ראשי</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">מוצרים<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li class='text-right'><a href='product.php?id=1'>שמן מרוכז רב תכליתי לפנים ולגוף</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=2'>קרם ג’ל עם אפקט מתיחה מיידי</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=3'>ג'ל ניקוי מטהר ומרענן לניקוי העור</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=4'>מי פנים מרעננים להרגעת ולטיהור העור</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=5'>סרום ליפט למיצוק העור ולתוספת לחות</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=6'>קרם פנים משקם רב תכליתי(Regenerating)</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=7'>קרם רב תכליתי למיצוק ולמתיחת העור באופן טבעי(Anti-Aging)</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='product.php?id=8'>קרם עיניים למראה צעיר ורענן</a></li> 
        <li role='separator' class='divider' style='background-color:darkgray;'></li>         </ul> 
      </li> 
        </li> 
     <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ערכות מומלצות<span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li class='text-right'><a href='kits.php?id=1'>עור רפווי וקמטים</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=2'>היפר פיגמנטציה וכתמי עור</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=3'>עור יבש וחסר לחות</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=4'>עור עייף וחסר חיוניות וזוהר</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=5'>עור רגיש ואדמומי</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=6'>מצבי עור מיוחדים: אקזמה עור מגורה סימניה מתיחה חשיפה לשמש ועוד</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li><li class='text-right'><a href='kits.php?id=7'>עור שמן\מעורב התפרצויות של פצעונים\אקנה</a></li> 
              <li role='separator' class='divider' style='background-color:darkgray;'></li>        </ul> 
         <li><a href="thestorybehind.php">הסיפור שמאוחרי המותג</a></li> 
      <li><a href="qna.php">שאלות נפוצות</a></li> 
      <li><a href="journalism.php">קטעי עיתונות</a></li> 
      <li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span> 
          <span class="badge badge-error">0</span> 
          </a> 
     </li> 
       </ul> 
     </div> 

Answer 2

私はあなたがここに書かれている同じコード、（任意のPHPを欠いた）最初のものをコピーしhere、それを実行しました。

私にとってはうまく動作し、すべてのリンクは同じ順序です。

- Ignore this line - 

フィドルリンクで画面サイズを変更して、自分で見ることができます。

Answer 3

スニペットの結果を見ると、小さなデバイスで方向が変更されたのはcssだけです。私はナビゲーションアイテムのシーケンスの変更で3つのアイテムしか使用していませんでしたが、使用したシーケンスと同じシーケンスを使用することができます。

@media (max-width: 768px) { 
 
     .navbar-nav>li { 
 
      float: left; 
 
      display:inline-block; 
 
      width:100%; 
 
     } 
 
    } 
 

 
    @media (min-width: 768px) { 
 
     .navbar-nav>li { 
 
      float:right !important; 
 
     } 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header navbar-right"> 
 
      <span class="hidden-lg hidden-md" style="padding:8px; color:gray; font-size:20px;"> 
 
       תפריט 
 
      </span> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
 
        data-target="#toggle" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse navbar-right" id="toggle"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="qna.php">שאלות נפוצות</a></li> 
 
       <li><a href="journalism.php">קטעי עיתונות</a></li> 
 
       <li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span><span class="badge badge-error">0</span> 
 
        </a></li> 
 

 
      </ul> 
 

 

 
     </div> 
 
    </div> 
 
</div> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>