web-dev-qa-db-ja.com

bootstrap 4.3.1で動作するようにdir = "rtl"を取得する方法は？

bootstrap 4.3.1を使用して単純なhtml/cssページを作成しています。1つの段落では、右から左の形式で表示する必要があるアラビア語のテキストを使用します。

cssでdirection:rtlを、htmlでdir="rtl"を、_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;
}
htmlcssbootstrap-4right-to-left
5
Shah Quadri

text-rightを追加してテキストを右揃えにし、dir="rtl"を追加して右から左の方向にします。

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

text-rightクラス。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p dir="rtl" class="text-right">
حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
</p>
0
suhailvs