web-dev-qa-db-fra.com

Comment obtenir DIR = "RTL" pour fonctionner avec bootstrap 4.3.1?

Je crée une simple page HTML/CSS en utilisant bootstrap 4.3.1. Dans un paragraphe, je vais utiliser du texte arabe qui doit apparaître dans un format de droite à gauche.

J'ai essayé d'utiliser direction:rtl dans css, dir="rtl" dans html et bidi-override ainsi que. Mais rien ne semble fonctionner. Je pense que cela a quelque chose à voir avec bootstrap 4.3.1 Mais je pourrais me tromper. Je suis incapable de comprendre où je vais mal et j'apprécierais grandement toute aide.

Ceci est mon 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>

Ceci est mon 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
12
Shah Quadri

Il suffit d'ajouter text-right Aligner le texte du texte et dir="rtl" Pour faire la direction droite à gauche:

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

vous pouvez utiliser text-right classer.

<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