我正在使用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;
}
您可以使用另一个库:RTL Bootstrap。它提供了css来完成这项工作。
这个git-diff显示了原始Bootstrap库和RTL Bootstrap库之间的区别。