如何在 react-bootstrap 中有从右到左的方向？答案

【问题标题】：How to have right to left direction in react-bootstrap?如何在 react-bootstrap 中有从右到左的方向？
【发布时间】：2017-12-10 16:09:13
【问题描述】：

我想构建从右到左方向的反应 UI。到目前为止，我已经在 react-bootstrap 组件上测试了 bootstrap className="pull-right" 或使用 *{direction:rtl;} 和 .float-right:{float:right;} 手动覆盖 CSS 属性。然而，这似乎是一种失败的方法，因为它不适用于某些元素，例如这个下拉按钮，该按钮失去了默认的填充和形状，或者某些项目仍然具有它们之前相对于彼此的顺序。

是否有任何具有 RTL 方向的反应框架？换句话说，有 React + Bootstrap 和 Bootstrap + RTL 的框架。有没有类似的

反应 + 引导 + RTL？还是 React + 一些 CSS 框架 + RTL？

我正在考虑使用 bootstrap-rtl 代替 bootstrap-react 组件，并用我的 react 组件包装这些 HTML/CSS 组件；但是 boostrap 需要 jQuery 库，我读到过，在考虑这种组合时需要谨慎（react + jquery）。

【问题讨论】：

标签： twitter-bootstrap reactjs right-to-left react-bootstrap semantic-ui-react

【解决方案1】：

也许这会有所帮助：

https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl

正如它所说，只需将rtl 类添加到您想要从右到左的任何元素。

【讨论】：

【解决方案2】：

它不是最好的实现，但它会为你工作

转到 package.json 并在依赖项中添加该行

 "bootstrap-v4.5-rtl":"*",

并在 index.js 中添加

import 'bootstrap-v4.5-rtl/css/rtl/bootstrap.rtl.min.css';

并将 index.html 第二行改为 to

<html lang="ar" dir="rtl">

你也可以使用

bootstrap-v4-rtl 但并非一切都已实施使用 bootstrap-v4-rtl 你应该使用

import 'bootstrap-v4-rtl/dist/css/bootstrap-rtl.min.css';

在写这个答案之前，没有针对 RTL 的 v5 实现

【讨论】：

哈姆..getbootstrap.com/docs/5.0/getting-started/rtl