html - html中的元素对齐

Question

我的基于 html Bootstrap 的页面中有一个导航栏，其中包含以下元素:

item7 item6 item5 item4 item3 item2 item1

它是波斯语，应该从右到左排列。

当它加载到手机上时，它会显示如下元素:

 - item7
 - item6
 - item5
 - item4
 - item3
 - item2
 - item1

我怎样才能这样安排它们:

 - item1
 - item2
 - item3
 - item4
 - item5
 - item6
 - item7

CSS:

element.style {
    text-align: right;
}
.navbar-nav {
    margin: 7.5px -15px;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

Answer 1

不要在标记中从右到左排列列表项。保持原顺序；

  <ul class="nav navbar-nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
  </ul>

然后，将用于较大屏幕尺寸的 .navbar-nav > li 的 Bootstrap 样式覆盖为 float-right。

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

这样，在大屏幕上，当水平显示 nav 时，它会反转您的顺序。但是，在较小的屏幕尺寸上，当列表项折叠时，它们将在垂直显示时保留原始顺序。

演示:http://jsfiddle.net/abhitalks/jwcagnwv/

.