如何将Bootstrap Selectpicker选中项设置为右对齐？

由于Bootstrap Selectpicker会将原生<select>替换为自定义的DOM结构，选中的内容实际渲染在.filter-option元素中，仅给原生选项加样式无法影响选中后的显示，需针对组件生成的元素编写CSS：

基础解决方案 #

添加以下CSS代码，直接覆盖组件默认样式：

.bootstrap-select .filter-option {
  text-align: right !important;
}

!important用于确保优先级高于组件自带样式，保证生效。

精准定位特定组件 #

如果只需对某个特定的selectpicker生效，可给外层容器添加自定义类（比如rtl-select），再编写针对性样式：

修改后的HTML： #

<div class="input-prepend input-append text-right rtl-select">
  <select class="selectpicker">
    <option class="text-right">مرة واحدة</option> 
    <option class="text-right">اسبوعي</option>
  </select>
</div>

对应的CSS： #

.rtl-select .bootstrap-select .filter-option {
  text-align: right !important;
}

RTL语言适配（可选） #

若使用阿拉伯语等RTL语言，建议同时设置组件方向，让下拉箭头位置也符合RTL布局习惯：

.bootstrap-select {
  direction: rtl !important;
}
.bootstrap-select .dropdown-toggle .caret {
  left: 10px;
  right: auto;
}

内容的提问来源于stack exchange，提问作者SadCoder