Question

我有一个这样的侧边栏：

小提琴：http://jsfiddle.net/mavent/m56wW/20/

<div class="my_sidebar"> <i style="border: 1px solid blue;" class="glyphicon glyphicon-chevron-left"></i><br>
.my_sidebar {top: 60px;bottom:0;left:0;position: fixed;width: 30px;height: 100%;background-color: #fa0;border: 1px solid red;opacity: 0.9;z-index:51;}

此侧边栏固定在左侧它从顶部的+ 60px开始，宽度为30px。这适用于LTR 但是当我改变RTL的方向时，这个侧边栏并没有向右侧移动。因为left:0px。

添加.my_sidebar_rtl之类的新类，将right:0;置于其中并包含它是一个选项。

但我想知道是否有可能通过一个my_sidebar类获得此行为？

Answer 1

基于文本方向处理布局的最简单方法是：

<强> LTR

<html>

<强> RTL

<html dir="rtl">

<强> CSS

.my_sidebar {
    left: 0;
    ...
}

[dir="rtl"] .my_sidebar {
    left: auto;
    right: 0;
}

http://jsfiddle.net/coma/UbW4W/

使用RTL方向时切换侧栏

1 个答案: