天天看點
傳回

bootstrap-select内容太長了下拉框特别長解決

css

js 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-zh_CN.min.js"></script>

目前版本用的是

bootstrap3.4.1

bootstrap-select 1.13.18

在

bootstrap-select.min.css

下加入如下css即可

.bootstrap-select .dropdown-menu {
            width: 100%;
        }

        .bootstrap-select .dropdown-menu li a span {
            white-space: normal;;
        }

效果

bootstrap-select内容太長了下拉框特别長解決

注意

原本選項比較少時高度會自動适應

bootstrap-select内容太長了下拉框特别長解決

改在後預設就會多出很多空白空間

bootstrap-select内容太長了下拉框特别長解決

bootstrap-select v1.14.0+

從這個版本開始有個最大的亮點就是

此版本的亮點是支援使用 Ajax/JSON 作為資料源。這包括一個新的source選項，它支援3個屬性：data，load，和search。所有 3 種都支援将選項數組傳遞給回調參數的函數。或者，可以設定一個數組（可能對 更有用data）。如果source.load設定了，它會在到達下拉菜單底部時調用。如果source.search設定，bootstrap-select 的内部搜尋功能将被繞過，允許您自己執行搜尋。如果執行搜尋并source.search設定，則在到達下拉菜單底部時将再次調用。

示例 

$('#test2').selectpicker({
    source: {
        data: function (callback) {
            var array = [
                {
                    text: 'Tent',
                    icon: 'fa-camera'
                },
                {
                    text: 'Flashlight',
                    selected: true
                },
                {
                    text: 'Disabled Option',
                    disabled: true
                },
                {
                    value: 'divider',
                    divider: true
                },
                {
                    text: 'Toilet Paper'
                }
            ];

            callback(array);
        },
        load: function (callback, page) {
            $.ajax('/api/load-more', { data: { page } })
                .then((response) => callback(response.data))
        },
        search: function (callback, page, searchTerm) {
            $.ajax('/api/search', { data: { page, search: searchTerm } })
                .then((response) => callback(response.data))
        }
    }
});

bootstrap4

僅适用于 bootstrap-select v1.13.0+

bootstrap5

在bootstrap5中已經沒有上述問題

測試代碼 

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必須的 meta 标簽 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap5+jquery.validate-表單驗證插件</title>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

    
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-zh_CN.min.js"></script>


    <style>
        .bootstrap-select .dropdown-menu {
            width: 100%;
        }

        .bootstrap-select .dropdown-menu li a span {
            white-space: normal;
        }
    </style>


</head>
<body>

<div class="container">

    <div class="row">
            <div class="col">
                <select class="selectpicker form-control">
                    <option value="1">額外企鵝去</option>
                    <option>惡趣味請問</option>
                    <option>而我卻委屈</option>
                </select>
            </div>
            <div class="col">
                <select class="selectpicker form-control" data-live-search="true" title="分類專欄">
                    <option value="1">卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽卧槽</option>
                    <option>範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩範德薩</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                    <option>卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒卧槽卧槽的撒</option>
                </select>
            </div>
    </div>





</div>

<script>

</script>


</body>
</html>

預留問題

就是如果選項太長了，開啟多選的時候最好把選中的内容保留指定字數，然後用引号替代剩下内容

上一篇: 幹貨分享：Cisco CCNP視訊教程
下一篇: DuiVision開發教程(16)-區域控件