Question

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

是否有任何反应框架用于RTL方向？换句话说，有React + Bootstrap和Bootstrap + RTL的框架。有什么像

React + Bootstrap + RTL？或者React +一些CSS框架+ RTL？

我正在考虑使用bootstrap-rtl而不是bootstrap-react组件，并使用我的react组件包装这些HTML / CSS组件;然而，boostrap需要jQuery库，我读到了，在考虑这个组合时需要谨慎（react + jquery）。

Answer 1

这不是最好的实现，但对你有用

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

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

并在 index.js 添加

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

并将 index.html 第二行更改为

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

你也可以使用

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

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

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

Answer 2

也许这可以帮助您

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

如前所述，只需将rtl类添加到要从右到左的任何元素。

如何在react-bootstrap中使用从右到左的方向？

2 个答案: