css - 将 Bootstrap 选择器字段的标题对齐到右侧
问题描述
我使用Creative Tim 的 Material Dashboard Proselect
创建了一个字段。
我想将选择字段及其选项向右对齐,但到目前为止,我设法仅对齐选项,而不是其标题或所选选项:
如上图所示,只有选项右对齐,字段标题没有。
即使我选择了一个选项,标题仍然是左对齐而不是右对齐。
这是我用来创建此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
字段的标题向右对齐?
解决方案
所以我想出了如何解决它,在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>
推荐阅读
- javascript - Mocha Chai AssertionError:预期数组是 json
- python - 更新字典条目而不指定它们
- javascript - 按即将到来的日期对日期为字符串的数组进行排序
- ios11 - 如何在转换视图控制器时修复 UISearchBar 轻弹动画?
- r - R中的剪切函数替代
- regex - 在 Google Doc Apps 脚本中使用 RegEx 替换文本
- c++ - boost interval_set 或 interval_map 可以创建具有集群成员计数的集群吗?
- morris.js - Morris.js xlabels 在垂直位置切割
- google-maps - Google 地图可以显示 3D KML 对象吗?
- forms - 控制器没有提交文件