frameworks - 在 Bulma 中改变方向到 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