css 如何让dir=“rtl”在bootstrap 4.3.1中工作？

kh212irz 于 2023-05-08 发布在 Bootstrap

关注(0)|答案(8)|浏览(141)

我使用bootstrap 4.3.1创建一个简单的html/css页面。在一个段落中，我将使用一些阿拉伯文本，需要显示在从右到左的格式。
我尝试在css中使用direction:rtl，在html和bidi-override中使用dir="rtl"。但似乎什么都不起作用。我认为这与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;
}

css

来源：https://stackoverflow.com/questions/55880059/how-to-get-dir-rtl-to-work-with-bootstrap-4-3-1

8条答案

按热度按时间

kiayqfof1#

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

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

更新：根据一些答复：
你可以在没有 Boot 带的情况下这样做，就像下面这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RTL Text Example</title>
    <style>
        .rtl {
            direction: rtl;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="rtl">
        <p>مرحبا بالعالم!</p>
        <p>أهلا وسهلا بكم في موقعنا.</p>
        <p>شكرا جزيلا لزيارتكم.</p>
    </div>
</body>
</html>

赞(0）回复(0）举报 2023-05-08

fd3cxomn2#

你可以用另一个库来实现：RTL Bootstrap。它提供CSS来完成这项工作。
这个git-diff显示了原始Bootstrap库和RTL Bootstrap库之间的差异。

赞(0）回复(0）举报 2023-05-08

jmo0nnb33#

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

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

赞(0）回复(0）举报 2023-05-08

wydwbb8l4#

除了上面提到的，值得补充的是，仅仅使用rtl引导库并不总是足够的。在某些情况下，有必要使用符号，如&，！、@、$等。它们将出现在句子的右侧，即使阿拉伯语或希伯来语的句子是从右到左写的。如果你想让它们出现在句子的末尾，（在阿拉伯语、希伯来语等语言中是句子的最左边），你必须添加<html dir="rtl">

赞(0）回复(0）举报 2023-05-08

ih99xse15#

可以使用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）回复(0）举报 2023-05-08

46qrfjad6#

如果有人正在将RTL支持添加到使用Bootstrap 4和SASS创建的现有项目中，以下步骤可能会有所帮助：
1.将dir="rtl"和lang="ar"（'ar'代表阿拉伯语）添加到HTML（Javascript：document.documentElement.dir = "rtl"）
1.在Mozilla RTL Guidelines的帮助下替换可能的属性。
1.从bootstrap4-rtl导入sass文件，该文件将引导类转换为RTL。
1.接下来，通过添加额外的CSS来更改剩余的样式：[dir="rtl"] .class-name { ... }

赞(0）回复(0）举报 2023-05-08

vjrehmav7#

只需将（“text-right”）类添加到您希望将其与<html dir="rtl">沿着设置为RTL的元素。
一旦你的文档加载，你运行这个检查并应用RTL类（text-right），但它将应用于所有的网页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");
    }
  }
}

你可以对“section”和/或“button”或任何你想成为RTL的东西做同样的事情。

赞(0）回复(0）举报 2023-05-08

0aydgbwb8#

尝试下面的解决方案。它为我工作。希望对你有帮助。

<p class="yourClass" dir="rtl">
      <p>Your elements should be here</p>   
 </p>

赞(0）回复(0）举报 2023-05-08

我来回答

css 如何让dir=“rtl”在bootstrap 4.3.1中工作？

8条答案

相关问题

热门标签

最新问答