如何让 dir="rtl" 与引导程序 4.3.1 一起使用？

Question

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

我曾尝试使用direction:rtlin css、dir="rtl"inhtml和in 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

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

这个git-diff显示了原始 Bootstrap 库和 RTL Bootstrap 库之间的差异。

Answer 2

只需添加text-right右对齐文本dir="rtl"并使从右到左的方向：

          <p class="ayat_ar_txt text-right" dir="rtl">
            ?????? ????? ????? ????????? ??????? ??????????? ??????? ??????? ?????? ???? ????? ?????????? ????????? ?????????? ?????? ???? ?????? ???????? ????????? ?????? ?????? ????? ?????? ?????? ?????? ???????  <span class="ayat_period">?</span>
          </p>