Frameworks 在Bulma中将方向更改为rtl存在问题

各位晚上好

最近我使用了Bulma框架，现在我想尝试在RTL模式下设计我的主题，我已经安装了所有必要的东西，比如Bulma RTL和，但当我尝试使用它时，在浏览器中显示的导出如下图所示，我尝试使用body direction，但它不起作用，还有一件事我使用laravel并使用npm安装了所有这些

这是我的代码：

<nav class="navbar " role="navigation" aria-label="main navigation">
 <div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
  </a>

  <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data- 
   target="navbarBasicExample">
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
  </a>
 </div>

 <div id="navbarBasicExample" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
      Home
    </a>

   <a class="navbar-item">
    Documentation
   </a>

   <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      More
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        About
      </a>
      <a class="navbar-item">
        Jobs
      </a>
      <a class="navbar-item">
        Contact
      </a>
      <hr class="navbar-divider">
      <a class="navbar-item">
        Report an issue
      </a>
    </div>
  </div>
</div>

<div class="navbar-end">
  <div class="navbar-item">
    <div class="buttons">
      <a class="button is-primary">
        <strong>Sign up</strong>
      </a>
      <a class="button is-light">
        Log in
       </a>
     </div>
   </div>
  </div>
 </div>
</nav>
<nav class="navbar is-dark " role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
    <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
  </a>

   <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data- 
    target="navbarBasicExample">
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
    </a>
 </div>

 <div id="navbarBasicExample" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
       Home
   </a>

   <a class="navbar-item">
     Documentation
   </a>

   <div class="navbar-item has-dropdown is-hoverable">
     <a class="navbar-link">
       More
     </a>

     <div class="navbar-dropdown">
       <a class="navbar-item">
         About
       </a>
       <a class="navbar-item">
         Jobs
       </a>
       <a class="navbar-item">
         Contact
       </a>
       <hr class="navbar-divider">
       <a class="navbar-item">
        Report an issue
       </a>
     </div>
   </div>
 </div>

 <div class="navbar-end">
   <div class="navbar-item">
     <div class="buttons">
       <a class="button is-primary">
         <strong>Sign up</strong>
       </a>
       <a class="button is-light">
         Log in
       </a>
      </div>
     </div>
    </div>
  </div>
 </nav>

现在的版本：0.9.0支持RTL语言

你不需要做任何特别的事情

只需下载新版本的Bulma并使用Bulma-rtl.css文件

---

在应用bulma rtl之后，您必须创建这个类并将其添加到您的navbar、navbar示例和navbar开始类中

.flex-direction-row{
    flex-direction: row;
};

希望对您有所帮助。

如果您使用ReactJs

检查Bluma框架版本。您的版本>=0.90

在Index.js文件导入中，必须使用bluma-rtl.min.css：

默认情况下：

改为：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bulma/css/bulma.min.css';

ReactDOM.render( <App/> , document.getElementById('root') );

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bulma/css/bulma-rtl.min.css';

ReactDOM.render( <App/> , document.getElementById('root') );