Проблема с настройкой семантического UI RTL?

Мне трудно установить RTL с Semantic UI, я использовал npm для установки семантики, затем отредактировал файл semantic.json "rtl": false, чтобы true затем последовал этот вопрос (существующая установка), но не работал поддерживает ли фреймворк семантического пользовательского интерфейса языки RTL?

Я также пробовал это с CDN https://rtlcss.com/cdn/css-frameworks/semantic-ui/index.html, тоже не сработало! Проблема с настройкой семантического UI RTL? В чем проблема ?

semantic.json

permission": false,
  "autoInstall": false,
  "rtl": true,
  "version": "2.3.3"
}

html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Homepage</title>
    <!-- Semanti UI -->
    <link rel = "stylesheet" type = "text/css" href = "semantic/dist/semantic.rtl.css">

    <!-- Semanti UI -->
    <link rel = "stylesheet" href = "index.css">


    </head>
    <body>

    <!-- nav -->
    <div class = "ui stackable menu">
            <div class = "item">
              <img src = "https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png">
            </div>
            <a class = "item">Features</a>
            <a class = "item">Testimonials</a>
            <div class = "right menu">
                    <a class = "item ">Sign-in</a>
                    <a class = "item ">Sign-up</a>
            </div>

          </div>
    <!-- nav -->
    <div class = "commentsContainer">

            <h2 class = "ui center aligned icon header">
                    SMLE
                  </h2>

            <div class = "ui stacked segment">
                    <p> بسم الله الرحمن الرحيم
                    </p>


                  </div>

                 <div class = "bu">
                        <div class = "RorL">
                                <button class = "ui blue right labeled icon button">
                                        <i class = "right arrow icon"></i>
                                        التالي
                                      </button>

                        </div>



                        <button class = "ui blue left labeled icon button">
                                <i class = "left arrow icon"></i>
                                السابق
                              </button>


                 </div>



    <div class = "ui small comments">
            <h3 class = "ui dividing header">Comments</h3>
            <div class = "comment">
              <a class = "avatar">
                <img src = "https://semantic-ui.com/images/avatar2/large/molly.png">
              </a>
              <div class = "content">
                <a class = "author">Matt</a>
                <div class = "metadata">
                  <span class = "date">Today at 5:42PM</span>
                </div>
                <div class = "text">
                  How artistic!
                </div>
                <div class = "actions">
                        <a class = "reply"><span> 22</span> UpVote</a>
                        <a class = "reply">DownVote</a>

                  <a class = "reply">Reply</a>

                </div>
              </div>
            </div>
            <div class = "comment">
              <a class = "avatar">
                <img src = "https://semantic-ui.com/images/avatar2/large/matthew.png">
              </a>
              <div class = "content">
                <a class = "author">Elliot Fu</a>
                <div class = "metadata">
                  <span class = "date">Yesterday at 12:30AM</span>
                </div>
                <div class = "text">
                  <p>This has been very useful for my research. Thanks as well!</p>
                </div>
                <div class = "actions">
                  <a class = "reply">Reply</a>
                </div>
              </div>
              <div class = "comments">
                <div class = "comment">
                  <a class = "avatar">
                    <img src = "https://semantic-ui.com/images/avatar2/large/kristy.png">
                  </a>
                  <div class = "content">
                    <a class = "author">Jenny Hess</a>
                    <div class = "metadata">
                      <span class = "date">Just now</span>
                    </div>
                    <div class = "text">
                      Elliot you are always so right :)
                    </div>
                    <div class = "actions">
                      <a class = "reply">Reply</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class = "comment">
              <a class = "avatar">
                <img src = "https://semantic-ui.com/images/avatar2/large/kristy.png">
              </a>
              <div class = "content">
                <a class = "author">Joe Henderson</a>
                <div class = "metadata">
                  <span class = "date">5 days ago</span>
                </div>
                <div class = "text">
                  Dude, this is awesome. Thanks so much
                </div>
                <div class = "actions">
                  <a class = "reply">Reply</a>
                </div>
              </div>
            </div>
            <form class = "ui reply form">
              <div class = "field">
                <textarea></textarea>
              </div>
              <div class = "ui blue labeled submit icon button">
                <i class = "icon edit"></i> Add Reply
              </div>
            </form>
          </div>
    <!-- Comments -->
    </div>



    <!-- Semanti UI -->
    <script
      src = "https://code.jquery.com/jquery-3.1.1.min.js"
      integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 = "
      crossorigin = "anonymous"></script>
    <script src = "semantic/dist/semantic.min.js"></script>
    <!-- Semanti UI -->

    </body>
    </html>

включить больше контекста html, самый простой html + javascript можно редактировать внутри stackoverflow, попробуйте использовать эти инструменты, чтобы прояснить ваш вопрос и привлечь больше внимания.

Alessandro Oliveira 17.08.2018 05:05
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
341
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Исправлено, это простая ошибка.

В коде этого не было.

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

Другие вопросы по теме