引导选择框 - 居中文本

问题描述

我有以下引导程序 4.3.1 下拉选择框。无法将选择框中的文本（“未选择任何内容”）居中。

$(function() {
    $('.selectpicker').selectpicker();
 });

<link href="https://www.sailwbob.com/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="https://www.sailwbob.com/bootstrap/bootstrap-select.min.css" rel="stylesheet"/>



<select id='test' multiple data-style="bg-white border border-dark pill px-4 py-3   " data-selected-text-format="count" class="selectpicker justify-content-center  w-50">
            <option>United Kingdom</option>
            <option>United States</option>
            <option>France</option>
            <option>Germany</option>
            <option>Italy</option>
        </select>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap-select.min.js" </script>

解决方法

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-align: center;
}

改为将 text-center 类添加到 div：

<div class="filter-option-inner-inner text-center">Nothing selected</div>

或父母：

<div class="filter-option-inner text-center"></div>

或“祖父母”（笑）：

<div class="filter-option text-center"></div>

bootstrap-4 text-align