使Bootstrap btn-group显示从右到左

时间:2017-08-09 17:01:41

标签: css twitter-bootstrap

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

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

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

代码:

btn-group

2 个答案:

答案 0 :(得分:1)

bootstrap浮动你的元素,你还需要覆盖float方向:



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

<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;
&#13;
&#13;

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

  

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

我给了它一些更多的试验,并最终通过旋转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>