html - 为什么选择选项在 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> 的属性(property)元素:

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

在 Chrome 中似乎是行 direction: rtl;没有正确对齐文本并尝试重新计算它的位置，因为选项改变了它们在显示中的位置。

updated demo