在布尔玛改变方向到 rtl 的问题

Question

大家晚上好

最近我使用了 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>

Answer 1

现在Bulma framework（从版本：0.9.0）支持 RTL 语言。

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

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

Example on codepen

Answer 2

应用 bulma-rtl 后，您必须创建此类并将其添加到您的 navbar、navbarBasicExample 和 navbar-start 类中。

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

like this

希望能帮到你。

Answer 3

如果您使用的是 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') );

Answer 4

将dir="rtl" 添加到包含 RTL 文本的最里面的 html 标记 示例：

<div class="columns is-mobile">
  <div class="card">
    <div class="card-content">
      <div class="content is-large">

        <p dir="rtl">
          یه متن به زبان فارسی
        </p>

      </div>
    </div>
  </div>
</div>