为什么选择选项在bootstrap中获取填充？

Question

我有这个标记：

<div style="direction: rtl; text-align: right;">
    <div class="form-inline">
        <div class="form-group col-lg-3">
            <label class="hidden-sm hidden-xs">بازه زمانی </label>
            <select class="form-control">
                <option value="1">1 روز گذشته</option>
                <option value="2">2 روز گذشته</option>
                <option value="3" selected="selected">3 روز گذشته</option>
                <option value="4">1 هفته گذشته</option>
                <option value="5">2 هفته گذشته</option>
                <option value="6">1 ماه گذشته</option>
                <option value="0">تعیین زمان</option>
            </select>
        </div>
    </div>
</div>

如您所见，我正在使用bootstrap v3.1.1。问题是，当我在Chrome中看到该页面时，一些选项会出现填充：

Here是一个有效的演示版。我试图通过css删除所有填充和边距;但没有改变。你知道吗，为什么会这样？

Answer 1

您可以通过为text-align元素设置<option>属性来解决此问题：

.form-control option {
  text-align: right;
}

Chrome direction: rtl;中的行似乎无法正确对齐文字并尝试重新计算其位置，因为选项会更改其在展示位置的位置。

updated demo