Bootstrap-select align only text right

问题

I want to align the text of the dropdown to the right and keep the carret at his place. I got a long form and every icon are on the right, so moving the carret is not an option. I found how the get the option on the right, but the selected one stay on the left.

I try an issue by overriding the js.min, but I need to have other dropdown somewhere else left align. So I ask for your help.

There is the code:

<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>

This is how it look: actual

This is how it should look: wanted

Thank you for helping!

回答1:

for that, you should custom your CSS, so add the following style:

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

回答2:

try to add css:

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

回答3:

Try giving the class "selectpicker" the aditional class "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:

Add below style:

.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;;
}

来源：https://stackoverflow.com/questions/35706194/bootstrap-select-align-only-text-right

标签

twitter-bootstrap

bootstrap-select