Блог

Главная - Вопросы по программированию - Неверное отображение CSS с множественным выбором начальной загрузки

Неверное отображение CSS с множественным выбором начальной загрузки

#jquery #asp.net-mvc #twitter-bootstrap #multi-select

#jquery #asp.net-mvc #twitter-bootstrap #множественный выбор

Вопрос:

У меня есть ASP.net приложение, использующее сценарий bootstrap multiselect. К сожалению, происходит что-то странное, когда я пытаюсь отобразить его в HTML.

Вот мой HTML:

 <head>
    <link href="~/Content/Style.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/umd/popper.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-multiselect.js"></script>
    <link href="~/Content/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
</head>

<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

<script type="text/javascript">
    $(document).ready(function () {
        $('#example-getting-started').multiselect();
    });
</script>

Как это выглядит в HTML:

введите описание изображения здесь

И доказательство того, что все это загружается: введите описание изображения здесь

Кто-нибудь знает, что происходит? Спасибо!

Комментарии:

1. Какую версию Bootstrap и какую версию Bootstrap Multiselect вы используете?

2. @Тизонт. Я использую версию Bootstrap 4.3.1, и у меня самая последняя версия на их github, так что 0.9.15. Я также использую jQuery версии 3.3.1

3. Bootstrap Multiselect не на 100% совместим с Bootstrap 4, как есть. Классы, которые он использует для построения выпадающего списка, взяты из Bootstrap 3, поэтому вы видите, что он отображается таким, какой он есть.

4. Хорошо, так решит ли переход на Bootstrap 3 мою проблему?

5. Ну, да, но Bootstrap 3 и Bootstrap 4 имеют довольно много различий, поэтому вам придется обновить довольно много разметки и / или кода. Я бы, вероятно, сначала поискал обновленную ветку.

Метки: