如果我有这个导航栏（阿拉伯语导航栏）：
你会注意到我颠倒了订单，所以它将以正确的阿拉伯语顺序显示
（首页الرئيسية）
在底部（在这种情况下是右侧），但是当您更改视口时它将毫无意义，因为它将从
（联系我们 - إتصلبنا）。
那么如何解决这个问题？
<div id="navbar" class=" nav-link navbar-collapse navbar-left collapse">
<ul class="nav nav-link navbar-nav navbar-left">
<li class="nav-link"><a href="#" data-nav-section="press"><span>اتصل بنا - Contact us</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="pricing"><span>أسعارنا - Prices</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="testimonials"><span>عملائنا - Our customers</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="features"><span>معرض اعمالنا - Gallery</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="services"><span>خدماتنا - Services</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="about"><span>من نحن - About</span></a></li>
<li class="active nav-link"><a href="#" data-nav-section="home"><span>الرئيسية - Home</span></a></li>
</ul>
</div>
答案 0 :(得分：0)
您可以旋转父元素180deg，然后旋转子元素-180deg。
def call(conn, level) do
# Executed before the request is processed.
Conn.register_before_send(conn, fn conn ->
# Executed after the response is generated.
conn # Make sure to return the `conn` here.
end)
end
ul {
transform: rotate(180deg);
}
ul > li {
transform: rotate(-180deg);
}
或者，您可以使用弹性框以及订单属性。
虽然这在技术上并没有颠倒顺序，但你也可以使用反增量和伪相元素。
示例
<div id="navbar" class=" nav-link navbar-collapse navbar-left collapse">
<ul class="nav nav-link navbar-nav navbar-left">
<li class="nav-link"><a href="#" data-nav-section="press"><span>اتصل بنا - Contact us</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="pricing"><span>أسعارنا - Prices</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="testimonials"><span>عملائنا - Our customers</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="features"><span>معرض اعمالنا - Gallery</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="services"><span>خدماتنا - Services</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="about"><span>من نحن - About</span></a></li>
<li class="active nav-link"><a href="#" data-nav-section="home"><span>الرئيسية - Home</span></a></li>
</ul>
</div>
ul {
list-style-type:none;
counter-reset:item 6;
}
ul > li {
counter-increment:item -1;
}
答案 1 :(得分：0)
使用direction: rtl;与#navbar类似：
#navbar {
direction: rtl;
}
请看下面的代码：
#navbar {
direction: rtl;
}<div id="navbar" class=" nav-link navbar-collapse navbar-left collapse">
<ul class="nav nav-link navbar-nav navbar-left">
<li class="nav-link"><a href="#" data-nav-section="press"><span>اتصل بنا - Contact us</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="pricing"><span>أسعارنا - Prices</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="testimonials"><span>عملائنا - Our customers</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="features"><span>معرض اعمالنا - Gallery</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="services"><span>خدماتنا - Services</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="about"><span>من نحن - About</span></a></li>
<li class="active nav-link"><a href="#" data-nav-section="home"><span>الرئيسية - Home</span></a></li>
</ul>
</div>
希望这有帮助！
答案 2 :(得分：0)
您可以将导航放在顶部/左侧。请遵循此示例
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
#main {
width:calc(100% - 300px);
float: right;
}
}
body {
margin: 0px;
padding: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Image Uploader</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" id="fkj">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Book Shopping</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Add Products</a>
</li>
<li>
<a href="#">My Cart</a>
</li>
<li>
<a href="adminPanel.html">Admin Panel</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="col-md-2"style="margin-left:0px;border-right:1px solid #cacdd1;">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Image Upload</a></li>
<hr style="margin:2px;">
<li><a href="#">Menu Number1</a></li>
<hr style="margin:2px;">
<li><a href="#">Menu Number2</a></li>
<hr style="margin:2px;">
<li><a href="#">Menu Number3</a></li>
<hr style="margin:2px;">
<li><a href="#">Menu Number4</a></li>
<hr style="margin:2px;">
<li><a href="#">Menu Number5</a></li>
<hr style="margin:2px;">
<li><a href="#">Menu Number6</a></li>
<hr style="margin:2px;">
</ul>
</div>
<div class="col-md-8" align="center">
<form action="" method="post" enctype="multipart/form-data">
Your Photo: <input type="file" name="photo" size="25" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<footer>
</footer>
</html>
答案 3 :(得分：0)
如果您需要这么大的灵活性，那么最好的＆amp;推荐的解决方案我建议 Flexbox - 它只是一个CSS3功能而不是任何框架等，所以可以随时实现。
解决方案
Check the Fiddle here（缩小面板大小以查看对较小宽度设备的影响）
您的魔法弹性属性为 order 。 Read about it here
元素按
order值的升序排列。具有相同order值的元素按照它们在源代码中出现的顺序排列。
所以你的navbar CSS看起来像：
.navbar-nav {
display: flex;
flex-direction: column;
}
li.nav-link:nth-child(1) {
order: 5; //this will appear on top since it has highest `order` value
}
li.nav-link:nth-child(2) {
order: 4; //this will appear second in the list
}
li.nav-link:nth-child(3) {
order: 3;
}
li.nav-link:nth-child(4) {
order: 2;
}
li.nav-link:nth-child(5) {
order: 1;
}
li.nav-link:nth-child(6) {
order: 0;
}
li.nav-link:nth-child(7) {
order: -1; //this will appear last as it has least `order` value
}
在较小/智能手机设备上，您可以使用media queries
@media only screen and (max-width: 500px) {
//`order` values have been changed
li.nav-link:nth-child(1) {
order: -1;
}
li.nav-link:nth-child(2) {
order: 0;
}
li.nav-link:nth-child(3) {
order: 1;
}
li.nav-link:nth-child(4) {
order: 2;
}
li.nav-link:nth-child(5) {
order: 3;
}
li.nav-link:nth-child(6) {
order: 4;
}
li.nav-link:nth-child(7) {
order: 5;
}
}
<强>优势
通过这种方式，您可以完全控制每个列表项目＆amp;在任何你想要的设备中随心所欲地安排它们。
.navbar-nav {
display: flex;
flex-direction: column;
}
li.nav-link:nth-child(1) {
order: 5;
}
li.nav-link:nth-child(2) {
order: 4;
}
li.nav-link:nth-child(3) {
order: 3;
}
li.nav-link:nth-child(4) {
order: 2;
}
li.nav-link:nth-child(5) {
order: 1;
}
li.nav-link:nth-child(6) {
order: 0;
}
li.nav-link:nth-child(7) {
order: -1;
}
@media only screen and (max-width: 500px) {
li.nav-link:nth-child(1) {
order: -1;
}
li.nav-link:nth-child(2) {
order: 0;
}
li.nav-link:nth-child(3) {
order: 1;
}
li.nav-link:nth-child(4) {
order: 2;
}
li.nav-link:nth-child(5) {
order: 3;
}
li.nav-link:nth-child(6) {
order: 4;
}
li.nav-link:nth-child(7) {
order: 5;
}
}<div id="navbar" class=" nav-link navbar-collapse navbar-left collapse">
<ul class="nav nav-link navbar-nav navbar-left">
<li class="nav-link"><a href="#" data-nav-section="press"><span>اتصل بنا - Contact us</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="pricing"><span>أسعارنا - Prices</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="testimonials"><span>عملائنا - Our customers</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="features"><span>معرض اعمالنا - Gallery</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="services"><span>خدماتنا - Services</span></a></li>
<li class="nav-link"><a href="#" data-nav-section="about"><span>من نحن - About</span></a></li>
<li class="active nav-link"><a href="#" data-nav-section="home"><span>الرئيسية - Home</span></a></li>
</ul>
</div>