Там были вопросы об этом раньше: https://stackoverflow.com/questions/10545594/twitter-bootstrap-css-that-support-from-rtl-languages
Но все ответы хороши для Bootstrap 2.х
Я'м работает над проектом, который по-арабски (РТЛ), и мне нужно на Bootstrap 3.х справа налево.
Кто-нибудь знает как это исправить?
Я очень рекомендую загрузки-РТЛ. Он построен на начальной загрузки ядра, а поддержка RTL добавляется, так как это тема на Bootstrap. Это сделает ваш код более легким в обслуживании, вы всегда можете обновить свой начальный загрузчик файлов. КДС
Еще один вариант использовать эту автономной библиотека, Он также поставляется с несколько удивительным арабским шрифтом.
в каждой версии Bootstrap,вы можете сделать это вручную
это делать большинство вещей, которые вы хотите для РТЛ
наконец, я могу найти новую версию в ушко. поделитесь здесь для всех:
бутстрап-3-3-7-РТЛ и РТЛ загрузочный 4.0.0-Альфа.6.1
Ссылка на GitHub:
https://github.com/parsmizban/RTL-Bootstrap
спасибо parsmizban.com для создания и поделиться.
Если вы хотите запустить 3 поддержка RTL и ltr на вашем сайте, вы можете изменить правила CSS "на лету" и, добавленные здесь-это функция, она изменяет основных классов для Bootstrap 3, как коль-(XS|см|МД|ЛГ)-(1-12), коль-(XS|см|МД|ЛГ)-нажимаем-(1-12), коль-(XS|см|МД|ЛГ)-тянуть-(1-12), коль-(XS|см|МД|ЛГ)-зачет-(1-12), есть много классов, чтобы быть изменены, но мне нужны только те.
Все, что вам нужно сделать, это позвонить макета функции`.setDirection('РТЛ') " или " макет.setDirection('Л') и это изменит правила CSS для Bootstrap 3 Grid системы.
Должен работать на всех браузерах (IE>=9).
var layout = {};
layout.setDirection = function (direction) {
layout.rtl = (direction === 'rtl');
document.getElementsByTagName("html")[0].style.direction = direction;
var styleSheets = document.styleSheets;
var modifyRule = function (rule) {
if (rule.style.getPropertyValue(layout.rtl ? 'left' : 'right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-push-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'right' : 'left'), rule.style.getPropertyValue((layout.rtl ? 'left' : 'right')));
rule.style.removeProperty((layout.rtl ? 'left' : 'right'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
}
if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
}
};
try {
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules || styleSheets[i].rules;
if (rules) {
for (var j = 0; j < rules.length; j++) {
if (rules[j].type === 4) {
var mediaRules = rules[j].cssRules || rules[j].rules
for (var y = 0; y < mediaRules.length; y++) {
modifyRule(mediaRules[y]);
}
}
if (rules[j].type === 1) {
modifyRule(rules[j]);
}
}
}
}
} catch (e) {
// Firefox might throw a SecurityError exception but it will work
if (e.name !== 'SecurityError') {
throw e;
}
}
}
Мы объявляем о AryaBootstrap,
Последняя версия основана на Bootstrap 4.3.1
AryaBootstrap это загрузчик с двойной раскладкой выровнять поддержки и используется для ltr и RTL веб-дизайн.
добавить "и Дир" и в HTML, это единственное действие, которое вы должны сделать.
Проверка веб-сайт AryaBootstrap по адресу: http://abs.aryavandidad.com/
AryaBootstrap на GitHub: https://github.com/mRizvandi/AryaBootstrap
вы можете использовать мой проект я создаю загрузочный 3 RTL с Sass и залпом, так что вы можете легко настроить его https://github.com/z-avanes/bootstrap3-rtl