css - RTL bulma CSS 导航栏

标签 css right-to-left bulma

我正在尝试在我的站点中为 RTL 用户添加选项。我正在使用 bulma (V 0.5.2),其中大部分(rtl)开箱即用,在 body 标签上有一个简单的 "style=direction:rtl"。然而,导航栏表现得很滑稽。如何使其与 RTL 一起正常工作?

这是在带有 rtl 的桌面上的样子:

This is what it looks like on desktop with rtl

在手机上是这样的:

And on mobile it's like this

最佳答案

好吧,我已经通过深入研究代码并了解应该在 oreder 中更改哪些内容才能使其作为 RTL 导航栏正常工作来解决这个问题。

我们在导航栏中有三个主要部分,我建议在您的 app.css 中为它创建一个类,或者您为您的 css 命名的任何名称 rtl-navbar 并将其应用于 navbar-burgernavbar-end。除此之外,您应该在主导航栏容器上应用 direction:rtl

.navbar-rtl{
   margin-right: auto;
   margin-left: 0;
}

关于css - RTL bulma CSS 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46165805/

相关文章:

javascript - 使用 Ryan Fait 代码的动态粘性页脚高度

html - 使用 Bulma CSS 将卡片居中

css - 将 div 粘贴在等高卡片的底部

javascript - 获取准确的浏览器渲染文本(RTL 和 LTR 方向混合)

javascript - 需要在 RTL 模式下对 IE6 和 IE7 中无效的 getBoundingClientRect() 进行解决

css - 尽管没有设置 is-multiline,为什么我的 bulma 列会换行?

javascript - 淡入/淡出 div 中的文本

css - Bootstrap 并排表单元素

jQuery:临时更改样式然后重置为原始类

android - Last Harka 在 Android 上的 Arabic Reshaper 中显示在该行的第一个字符之前