Question

this小提琴中显示的按钮未正确显示：由于文本是希伯来语，因此第一个按钮（str）应该是最正确的按钮，但是目前最左边的按钮

使用该样式，似乎这是由bytes类的id="first"属性（其值为display）引起的，当我将其更改为{{1}时按钮以正确的顺序显示，但第一个和最后一个孩子的边框（右边框和左边框）被翻转。

我在this问题中尝试了一些建议，但没有设法让它发挥作用。

代码：

btn-group

Answer 1

bootstrap浮动你的元素，你还需要覆盖float方向：

＆＃13;

div[dir="rtl"] .btn-group .btn
{
  float:right;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
  <div class="btn-group" role="group">
    <button id="first" type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-hdd"></span>&nbsp;אחת
    </button>
    <button id="second" type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-plus-sign"></span>&nbsp;שתיים
    </button>
    <button id="third" type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-minus-sign"></span>&nbsp;שלוש
    </button>
  </div>
</div>

＆＃13;

您也可以使用课程.pull-right。

HeyJude写道：边框被翻转。如果仔细观察，您会注意到第一个孩子的左边框（带圆角的边框）应该是正确的边框，反之亦然。

对于圆角，一个技巧可能是使用转换而不是重写CSS。它还需要在跨度中封装文本。 Icone是通过伪生成的，不应该搞乱它。

＆＃13;

div[dir="rtl"] .btn:first-of-type,
div[dir="rtl"] .btn:last-of-type,
div[dir="rtl"] .btn:first-of-type span,
div[dir="rtl"] .btn:last-of-type span {
  transform: scale(-1, 1);
  display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div dir="rtl">
  <div class="btn-group" role="group">
    <button id="first" type="button" class="btn btn-default pull-right">
      <span class="glyphicon glyphicon-hdd">&nbsp;אחת</span>
    </button>
    <button id="second" type="button" class="btn btn-default pull-right">
      <span class="glyphicon glyphicon-plus-sign">&nbsp;שתיים</span>
    </button>
    <button id="third" type="button" class="btn btn-default pull-right">
      <span class="glyphicon glyphicon-minus-sign">&nbsp;שלוש</span>
    </button>
  </div>
</div>

＆＃13;

Answer 2

我给了它一些更多的试验，并最终通过旋转btn-group然后旋转文本（将每个单元格的内容保存在自己的span元素中）来获得它：

.rotate
{
  transform: rotateY(180deg);
}
.rotate-back
{
  transform: rotateY(180deg);
  display: inline-block;
  direction: rtl;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group pull-right rotate" role="group">
  <button id="first" type="button" class="btn btn-default ">
    <span class="glyphicon glyphicon-hdd"></span><span class="rotate-back">&nbsp;אחת</span>
  </button>
  <button id="second" type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-plus-sign"></span><span class="rotate-back">&nbsp;שתיים</span>
  </button>
  <button id="third" type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-minus-sign"></span><span class="rotate-back">&nbsp;שלוש</span>
  </button>
</div>

使Bootstrap btn-group显示从右到左

2 个答案: