this小提琴中显示的按钮未正确显示:由于文本是希伯来语,因此第一个按钮(str
)应该是最正确的按钮,但是目前最左边的按钮
使用该样式,似乎这是由bytes
类的id="first"
属性(其值为display
)引起的,当我将其更改为{{1}时按钮以正确的顺序显示,但第一个和最后一个孩子的边框(右边框和左边框)被翻转。
我在this问题中尝试了一些建议,但没有设法让它发挥作用。
代码:
btn-group
答案 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> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>
&#13;
您也可以使用课程.pull-right
。
HeyJude写道:边框被翻转。如果仔细观察,您会注意到第一个孩子的左边框(带圆角的边框)应该是正确的边框,反之亦然。
对于圆角,一个技巧可能是使用转换而不是重写CSS。它还需要在跨度中封装文本。 Icone是通过伪生成的,不应该搞乱它。
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"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-plus-sign"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-minus-sign"> שלוש</span>
</button>
</div>
</div>
&#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"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span><span class="rotate-back"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span><span class="rotate-back"> שלוש</span>
</button>
</div>