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

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

我使用的是此处引用的代码：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
}