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>。

Bootstrap - 多语言2方向支持的良好实践？

1 个答案: