<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="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge badge-error">0</span>
</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">
<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 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><a href="index.php">ראשי</a></li>
</li>
</ul>
</div>
</div>
</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>
我有这个代码（带有Bootstrap和PHP的HTML5），当这个导航栏在移动设备上显示时，我遇到了一些问题。 当你在手机上看这个时，你可以看到链接在错误的地方。例如：
链接1 |链接2 |链接3
在移动设备上，它会显示如下：
链接3 链接2 链接1
而不是：
链接1 链接2 链接3
所以我的＃34;主要＆＃34;链接将是最后一个，我的最后一个链接将是第一个，这不是我想要的。
答案 0 :(得分：0)
您可以尝试仅为元素使用一个元素吗？我没有看到添加两个具有相同功能的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>
答案 1 :(得分：0)
我复制了你在这里编写的相同代码，第一个代码（没有任何PHP）并运行它here。
它适用于我，所有链接的顺序都相同。
private void tbNombre_Validating(object sender, CancelEventArgs e)
{
if (!new Validator().ValidateWithRegex("^[a-zA-ZÁáÀàÉéÈèÍíÌìÓóÒòÚúÙùÑñüÜ ]{2,20}$", tbNombre.Text))
{
e.Cancel = true;
MessageBox.Show(
"El nombre debe estar formado por letras (longitud: 2 a 20 caracteres)",
"Error en nombre",
MessageBoxButtons.OK, MessageBoxIcon.Error);
tbNombre.Text = "";
}
else
{
_emp.Nombre = tbNombre.Text;
}
}
您可以更改小提琴链接中的屏幕尺寸，以便自己查看。
答案 2 :(得分：0)
查看我的代码段的结果，仅使用css在小型设备上更改方向。我只使用了三个改变了导航项目序列的项目，你可以使用我使用过的所有序列。
@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>