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

【问题标题】：Bootstrap - good practice for multilingual 2 directions support?Bootstrap - 多语言 2 方向支持的良好做法？
【发布时间】：2015-03-19 22:50:17
【问题描述】：

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

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

当英语用户进入网站时，他应该从左到右看到内容。因此，假设我有一个带有文本的图像 - 图像将在左侧，文本在右侧。

当希伯来语用户输入时，他应该会看到右侧的图像和左侧的文本。

有没有一种可接受的方式在引导程序中执行此操作，而不必编写两次相同的 html 并且无需覆盖引导程序 css 类？

【问题讨论】：

Right to Left support for Twitter Bootstrap 3的可能重复
根据那个答案，他们所做的是覆盖 css 类 - 我想知道是否有更好的方法。
请原谅我对这方面的文化无知，但书面文字也是从右到左 - 即“apple”会读作“elppa”吗？如果是这样，这也是您寻求帮助的问题吗？还是只是放置文本/div 块等？
检查我们的 AryaBootstrap，“AryaBootstrap 是一个支持双布局对齐的引导程序，用于 LTR 和 RTL 网页设计。”，将“dir”添加到 html，这是您需要做的唯一操作。网址：abs.aryavandidad.com 或 GitHub：github.com/mRizvandi/AryaBootstrap

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

$('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>。

【讨论】：