如何在 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 按钮组。

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

我正在使用此处引用的代码：按钮组。基本示例。

结果是这样的：

我在引导代码的主 div 标签中添加了一个内联样式，但它没有改变任何东西：

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

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

提前致谢。

编辑：

对我来说，似乎所有 Bootstrap 按钮都存在 RTL 问题。我尝试了另一种类型：使用此页面中的代码拆分按钮下拉列表 ，结果如下：

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

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

Answer 1

我遇到了这个问题。我改变了三个引导类；第一的：

.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
}