Bootstrap-select 仅右对齐文本答案

【问题标题】：Bootstrap-select align only text rightBootstrap-select 仅右对齐文本
【发布时间】：2021-04-09 18:26:51
【问题描述】：

我想将下拉菜单的文本向右对齐，并将 carret 放在他的位置。我有一个很长的表格，每个图标都在右边，所以移动 carret 不是一种选择。我发现如何获取右侧的选项，但选定的选项留在左侧。

我通过覆盖 js.min 来尝试解决问题，但我需要在其他位置左对齐其他下拉菜单。所以我请求你的帮助。

有代码：

<div class="form-group oa-vert-marg-2 pull-right">
    <label class="col-sm-4 control-label" for="pmtType">Type de paiement&nbsp;&nbsp;&nbsp;</label>
    <div class="col-sm-8 input-group pad-btm pull-right">
        <select class="selectpicker" data="pull-right" data-style="text-right" id="pmtType" dir="rtl">
            <option class="text-right">Hebdomadaire</option>
            <option class="text-right">Quinzaine</option>
            <option class="text-right" selected>Mensuel</option>
        </select>
    </div>
</div>

它是这样的： actual

它应该是这样的： wanted

感谢您的帮助！

【问题讨论】：

标签： twitter-bootstrap bootstrap-select

【解决方案1】：

为此，您应该自定义 CSS，因此添加以下样式：

.bootstrap-select.btn-group .btn .filter-option {
   text-align: right   
}

【讨论】：

【解决方案2】：

尝试添加css：

.selectpicker {
  text-align-last: right;
}

【讨论】：

【解决方案3】：

尝试为“selectpicker”类添加额外的“pull-right”类？

<div class="form-group oa-vert-marg-2 pull-right">
<label class="col-sm-4 control-label" for="pmtType">Type de paiement&nbsp;&nbsp;&nbsp;</label>
<div class="col-sm-8 input-group pad-btm pull-right">
    <select class="selectpicker pull-right" data="pull-right" data-style="text-right" id="pmtType" dir="rtl">
        <option class="text-right">Hebdomadaire</option>
        <option class="text-right">Quinzaine</option>
        <option class="text-right" selected>Mensuel</option>
    </select>
</div>

【讨论】：

你能把它放在一个小提琴里吗？这样我就可以好好找你了

【解决方案4】：

添加以下样式：

.dropdown-toggle {
    padding-right: 5px !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
   text-align: right !important;
}

.bootstrap-select.btn-group .dropdown-toggle .caret {
    left: 12px !important;
    right: unset !important;;
}

【讨论】：

【解决方案5】：

这对我有用：

.bootstrap-select .dropdown-toggle .filter-option {text-align: right !important;}
.bootstrap-select .dropdown-menu.inner{text-align: right !important;}

【讨论】：