【问题标题】:bootstrap select box - center text引导选择框 - 中心文本
【发布时间】:2021-09-25 16:17:15
【问题描述】:

我有以下引导程序 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>

【问题讨论】:

    标签: css bootstrap-4 text-align


    【解决方案1】:
    .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>
    

    【讨论】:

    • 我会添加text-overflow: ellipsis以防万一
    • 这更像是一种蛮力方法。寻找一个优雅的引导类来添加
    猜你喜欢
    • 2022-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-14
    • 2015-03-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多