Question

我正在使用Bootstrap 4.3.1创建一个简单的html / css页面。在一个段落中，我将使用一些阿拉伯语文本，这些文本需要以从右到左的格式显示。

我也尝试在direction:rtl中使用css，在dir="rtl"和html中使用bidi-override。但是似乎没有任何作用。我认为这与Bootstrap 4.3.1有关，但我可能是错的。我无法理解我要去哪里哪里，将不胜感激。

这是我的html

<div class="row justify-content-center">
  <div class="col-sm-6" style="border:1px solid black">
    <div class="row">
      <div class="ayat_box">
        <div class="ayat_ar">
          <p class="ayat_ar_txt">
            حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
          </p>
        </div>
        <div class="ayat_en">
          <p class="ayat_en_txt">
some content in ltr
          </p>
        </div>
        <div class="ayat_exp">
          <p class="ayat_exp_p">
some content in ltr
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ayat_box" style="background: pink">
        This is another box
      </div>
    </div>
  </div>
</div>

这是我的CSS：

.ayat_box
{
    width: 700px;
    margin:0 auto;
}

.ayat_ar
{
    background: pink;
}

.ayat_ar_txt
{
    direction:rtl;
    font-family: arial;
    font-size:25px;
}

.ayat_period
{
  display:inline-block;
  border-radius:50%;
  border:1px solid black;
  padding-left:5px;
  padding-right:5px;
}

Answer 1

只需添加text-right即可使文本向右对齐，而添加dir="rtl"即可使文本从右向左移动：

          <p class="ayat_ar_txt text-right" dir="rtl">
            حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
          </p>

Answer 2

您可以使用另一个库： RTL Bootstrap 。它提供了CSS来完成这项工作。

此git-diff向您展示了原始Bootstrap库和RTL Bootstrap库之间的区别。

Answer 3

您可以将这些类添加到bootstrap.css或bootstrap.min.css文件中，并将它们用作类：

.rtl{direction:rtl!important;}
.ltr{direction:ltr!important;}

Answer 4

您可以使用${MyCurrentGroupName}-NumberOfThreads类。

int GetNumberOfThreads(string threadGroupName)
{
  return properties.get(threadGroupName + "-NumberOfThreads";
}

Answer 5

除上述内容外，值得补充的是，仅使用rtl引导程序库并不总是足够的。如果必须使用＆，！，@，$等符号，即使它们是从右到左书写的，它们也将出现在句子的右侧。如果希望它们出现在句子的末尾（阿拉伯语，希伯来语等在句子的最左侧），则必须添加 <html dir="rtl">

Answer 6

如果有人向使用 Bootstrap 4 和 SASS 创建的现有项目添加 RTL 支持，以下步骤可能会有所帮助：

将 dir="rtl" 和 lang="ar"（'ar' 代表阿拉伯语）添加到您的 HTML（Javascript：document.documentElement.dir = "rtl"）
在 Mozilla RTL Guidelines 的帮助下替换可能的属性。
从 bootstrap4-rtl 导入 sass 文件，该文件将引导程序类转换为 RTL。
接下来，通过添加额外的 CSS 来更改剩余的样式：[dir="rtl"] .class-name { ... }

Answer 7

只需将（“ text-right”）类添加到要与<html dir="rtl">一起使用的RTL元素即可。

文档加载后，您将运行此检查并应用RTL类（右文本），但它将应用于所有网页div元素，请享用bro和Jazakallah khairan：）

window.onload = function () {
if (document.documentElement.lang == 'ar') {
    var docDivz = document.getElementsByTagName("div");
    for (let i = 0; i < docDivz.length; i++) {
      if (docDivz[i].classList.contains("text-center")) {
        continue;
      }
      docDivz[i].classList.add("text-right");
    }
  }
}

您可以对“部分”和/或“按钮”或任何您想成为RTL的东西进行相同的操作。

如何使dir =“ rtl”与Bootstrap 4.3.1一起使用？

7 个答案: