Проблемы с выбором страны bootstrap 4 - PullRequest
Новая
       3

Проблемы с выбором страны bootstrap 4

0 голосов
/ 21 июня 2020

Говорят, что bootstrap 4 выбор страны не работает, поэтому я попытался прочитать документацию, как заставить его работать, и вот что я обнаружил.

Сделать bootstrap -select work с bootstrap 4 см .:

Bootstrap 4 beta-2

Bootstrap -select все еще несовместим (вер. 1.12.4) с Bootstrap 4 бета-2. Включите дополнительный файл CSS или поместите следующее между тегами на странице, на которой отображается средство выбора страны:

Ниже я пробовал код, но он не работает.

Кто-нибудь может мне помочь? 

.bootstrap-select>.dropdown-menu>.dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  text-decoration: none;
}

.bootstrap-select>.dropdown-menu>.dropdown-menu li a:hover {
  background-color: #f4f4f4;
}

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

.dropdown-menu>li.active>a {
  color: #fff !important;
  background-color: #337ab7 !important;
}

.bootstrap-select .check-mark {
  line-height: 14px;
}

.bootstrap-select .check-mark::after {
  font-family: "FontAwesome";
  content: "\f00c";
}

.bootstrap-select button {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Make filled out selects be the same size as empty selects */

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
<script src="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
<script src="http://hondaofishers.space/assest/js/countrypicker.min.js"></script>


<div>
  <div>
    <select class="selectpicker countrypicker" data-live-search="true" data-default="United States" data-flag="true"></select>
  </div>
</div>

1 Ответ

0 голосов
/ 21 июня 2020

bootstrap min js версия отсутствует в вашем коде, который также требует popper js согласно документации bootstrap 4 . Пожалуйста, проверьте рабочий код ниже.

Добавлено ниже new JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


an anyone help me?

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Country Select</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet"
        href="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

    <style>
        /*
Make bootstrap-select work with bootstrap 4 see:
https://github.com/silviomoreto/bootstrap-select/issues/1135
*/
        .dropdown-toggle.btn-default {
            color: #292b2c;
            background-color: #fff;
            border-color: #ccc;
        }

        .bootstrap-select.show>.dropdown-menu>.dropdown-menu {
            display: block;
        }

        .bootstrap-select>.dropdown-menu>.dropdown-menu li.hidden {
            display: none;
        }

        .bootstrap-select>.dropdown-menu>.dropdown-menu li a {
            display: block;
            width: 100%;
            padding: 3px 1.5rem;
            clear: both;
            font-weight: 400;
            color: #292b2c;
            text-align: inherit;
            white-space: nowrap;
            background: 0 0;
            border: 0;
            text-decoration: none;
        }

        .bootstrap-select>.dropdown-menu>.dropdown-menu li a:hover {
            background-color: #f4f4f4;
        }

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

        .dropdown-menu>li.active>a {
            color: #fff !important;
            background-color: #337ab7 !important;
        }

        .bootstrap-select .check-mark {
            line-height: 14px;
        }

        .bootstrap-select .check-mark::after {
            font-family: "FontAwesome";
            content: "\f00c";
        }

        .bootstrap-select button {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Make filled out selects be the same size as empty selects */
        .bootstrap-select.btn-group .dropdown-toggle .filter-option {
            display: inline !important;
        }
    </style>
</head>

<body>



    <select class="selectpicker" data-live-search="true" data-default="United States"
        data-flag="true">
      <option value="select">Select</option>
      <option value="India">India</option>
      <option value="USA">USA</option>
      <option value="Australia">Australia</option>
      <option value="South Africa">South Africa</option>
    </select>



    </div>

    </div>

    <!--Scripts-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script
        src="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
    <script src="http://hondaofishers.space/assest/js/countrypicker.min.js"></script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...