html - Bootstrap - 多语言 2 方向支持的良好做法？

Question

我正在构建一个同时使用英语 (LTR) 和希伯来语 (RTL) 的小型网站。

该网站使用相同的代码库，仅根据显示的语言更改标题。

当英语用户进入网站时，他应该从左到右看到内容。假设我有一张图片，旁边有文字 - 图片将位于左侧，文字位于右侧。

当希伯来语用户输入时，他应该会在右边看到该图片，在左边看到文字。

是否有一种可以在 Bootstrap 中执行此操作而无需两次编写相同的 html 且无需覆盖 Bootstrap css 类的可接受方法？

Answer 1

如果您将一些 js 附加到语言复选框，您可以添加/删除 pull-right类到您要移动的元素:

示例:http://www.bootply.com/FZMciVLVBL#

JS

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.ltr').addClass("pull-right");
    } else {
        $('div.ltr').removeClass("pull-right");
    }
});

HTML

<div class="col-xs-6 ltr">
  <div class="thumbnail">
    <img src="http://placehold.it/500x300">
  </div>
</div>
<div class="col-xs-6">
  <p>Caption 1...</p>
</div>

请注意如何 pull-right影响随后出现的其他内容 - 准备添加 <div class="clearfix"></div>在必要时移动内容 block 之后。