用于 RTL 语言的 Twitter Bootstrap 拉右和拉左

Posted 2023-03-14

【中文标题】用于 RTL 语言的 Twitter Bootstrap 拉右和拉左

【英文标题】：Twitter Bootstrap pull-right and pull-left for RTL languages

【发布时间】：2014-04-28 08:26:05

【问题描述】：

在 Twitter 引导程序 3 中，我的 div 中有一些字形图标，并为默认页面添加了“向右拉”。 当我将方向更改为 RTL 文本等时，翻转成功，但右拉不会切换到左拉。 我应该怎么做才能在 LTR 的右侧和 RTL 的左侧有一个图标？

(当然可以添加javascript代码并检查页面正文中的所有pull-rights并将它们更改为pull-left，但我不喜欢JS解决方案。我试过this但它没有帮助。）

小提琴： http://jsfiddle.net/mavent/dKPE3/1/

<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>

<div id="div2" class="alert alert-info">هذا هو بلدي وصف الهوى <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>

【问题讨论】：

如果您在 Bootstrap v3.2.0 (github.com/twbs/bootstrap/pull/12840) 中使用即将推出的 RTL 支持，它目前确实会反转 .pull-left/right 的方向。

@trante 简而言之，当文本从右到左时，您要做的是向左移动字形图标，对吗？

【参考方案1】：

当 .pull-right 出现在 rtl 元素之后时，您可以覆盖它以向左浮动。

像这样：

.rtl 
    direction: RTL;

.rtl .pull-right 
    float:left !important;

还有你的 div 元素：

<div id="div2" class="alert alert-info rtl">
    هذا هو بلدي وصف الهوى
    <span class="badge badge-info">122</span>
    <a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
        <i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
    </a>
</div>

这是一个FIDDLE

或者，您也可以使用 javascript：（使用相同的代码只需添加 javascript）

$(document).ready(function() 
    $('.pull-right').each(function() 
        if($(this).parent().css('direction') == 'rtl')
            $(this).attr('style', 'float:left !important');
    );
);

希望这会有所帮助。

【参考方案2】：

我不知道这是否对你有帮助，但你可以使用这个 Demo，即覆盖 pull-right 类

css

#div2 
    direction: RTL;


#div2 .pull-right 
    float: left !important;

【参考方案3】：

我建议调查一下这个library。它建立在 Bootstrap 核心之上，并包含从右到左的支持。

使用此独立 library 的另一种选择。

【讨论】：

我试过“ratnic/bootstrap-rtl”它没有用。我不喜欢使用这个分叉的引导程序 (zerox.me/projects/bootstrap3)。

【参考方案4】：

您可以使用RTLCSS 生成完整的 RTL 版本的 CSS，它使您能够扩展其功能以支持自定义场景。此外，它还支持 CSS3 变换（矩阵、平移、旋转……等）。