html - 如何在 RTL 页面中显示 Bootstrap 按钮组？

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

我正在尝试在从右到左 (RTL) 页面上使用 Bootstrap 按钮组。

但是，按钮被翻转了。 flex 的边缘不在组的外边缘，而是在中间按钮旁边。

我正在使用此处引用的代码:Buttons Group. Basic Example.

结果是这样的:

我在 Bootstrap 代码的主 div 标签中添加了一个内联样式，但它没有改变任何内容:

<div class="btn-group btn-group-justified" style="direction:rtl;" role="group" aria-label="...">

所以我的问题是:如何以在 RTL 页面上正确显示的方式设置按钮样式？

提前致谢。

编辑:

似乎所有 Bootstrap 按钮对我来说都存在 RTL 问题。 我尝试了一种不同的类型:拆分按钮下拉菜单使用代码 in this page 这是结果:

虽然它在 Bootstrap 文档中是这样显示的:

我尝试添加 direction:rtl，但同样没有任何区别。

Answer 1

我遇到了这个问题。我更改了三个 Bootstrap 类； 第一:

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left; // => right
}

第二个:

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0; //change right to left
          border-bottom-right-radius: 0; //change right to left
}

最后:

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0; // change left to right
  border-bottom-left-radius: 0; // change left to right
}