将 Bootstrap 选择器字段的标题向右对齐答案

【问题标题】：Align title of Bootstrap selectpicker field to the right将 Bootstrap 选择器字段的标题向右对齐
【发布时间】：2019-11-06 13:22:02
【问题描述】：

我使用Creative Tim's Material Dashboard Pro 创建了一个select 字段。

我想将选择字段及其选项向右对齐，但到目前为止我设法仅对齐选项，而不是其标题或所选选项：

如上图所示，只有选项右对齐，字段标题没有对齐。

即使我选择了一个选项，标题仍然是左对齐而不是右对齐。

这是我用来创建 select 字段的代码：

<select class="selectpicker" data-style="select-with-transition" title="Select One" dir="rtl">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

如何将select 字段的标题右对齐？

【问题讨论】：

这能回答你的问题吗？ Bootstrap-select align only text right
@PrakashKarena 不，我已经尝试过这样做，但标题仍然是靠左对齐的
你能提供在线sn-p之类的codpen吗，我可以看看是什么问题

标签： css select bootstrap-4 right-to-left

【解决方案1】：

所以我想出了如何解决它，在 title 属性中使用 HTML 标记并使用 data-content 属性，如下所示：

<select class="selectpicker" data-style="select-with-transition" title="<p style='text-align: right; margin-right: 30px;'>Select One</p>" dir="rtl">
    <option data-content="<p style='text-align: right; margin-right: 30px;'>A</p>" value="a">A</option>
    <option data-content="<p style='text-align: right; margin-right: 30px;'>B</p>" value="b">B</option>
    <option data-content="<p style='text-align: right; margin-right: 30px;'>C</p>" value="c">C</option>
</select>

【讨论】：