Как иметь направление справа налево в реакции-бутстрапе?

Я хочу создать пользовательский интерфейс реакции с направлением справа налево. До сих пор я тестировал начальную загрузку className="pull-right" или переопределение свойств CSS вручную с помощью *{direction:rtl;} и .float-right:{float:right;} в компонентах реакции-начальной загрузки. Однако это кажется неправильным подходом, поскольку он не работает с некоторыми элементами, такими как this раскрывающийся список, который теряет заполнение и форму по умолчанию, или некоторые элементы по-прежнему будут иметь свой предыдущий порядок относительно каждого Другие.

Есть ли какая-либо структура реагирования для направления RTL? Другими словами, есть фреймворки для React + Bootstrap и Bootstrap + RTL. Есть что-нибудь вроде

  • React + Bootstrap + RTL? или React + CSS framework + RTL?

Я подумывал об использовании bootstrap-rtl вместо компонентов bootstrap-react и оберните эти компоненты HTML / CSS моими компонентами реакции; Однако для boostrap нужна библиотека jQuery, и я читал об этом, нужно быть осторожным, думая об этой комбинации (реагировать + jquery).


reactjs right-to-left twitter-bootstrap react-bootstrap semantic-ui-react
person Milad R    schedule 10.12.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Может быть, это поможет:

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

Как было сказано, просто добавьте класс rtl к любому элементу, который вы хотите разместить справа налево.

person Ashkan AHB    schedule 11.09.2020

arrow_upward
1
arrow_downward

Это не лучшая реализация, но она сработает для вас.

перейдите в 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';

до написания этого ответа нет реализации v5 для RTL

person M.Ali El-Sayed    schedule 11.04.2021
comment
хамм .. getbootstrap.com/docs/5.0/getting-started/rtl - person moshiah_now; 28.06.2021