Проблема с выпадающим действием на Bootstrap v4 - PullRequest
Новая
       30

Проблема с выпадающим действием на Bootstrap v4

0 голосов
/ 09 февраля 2019

У меня есть пример страницы, которую я не могу запустить вниз.

Я загрузил jQuery, затем Bootstrap, затем popper (поместите popper перед тем, как что-то сломать) 

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap try out</title>

    <script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js" />


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


</head>
<body>

<div class="container">
    <div class="input-group text dropright " >
        <input class="form-control" readonly type="text" placeholder="<category map>">  <!-- form-control links field with the span -->
        <div class="input-group-append" dropdown>
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
    </div>
</div>
 </body>
</html>

Это отрисовывает кнопку - но раскрывающийся список не открывается.

Что я здесь пропустил?

PS: исправленная страница - размещение раскрывающегося меню внутри класса "", как это до сих порне отображает список - что-то еще не так. 

<div class="container">
    <div class="input-group text dropright " >
        <input class="form-control" readonly type="text" placeholder="<category map>">  <!-- form-control links field with the span -->
        <div class="input-group-append dropdown" >
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 10 февраля 2019

действительно странно - так что пошли на демонстрационный сайт w3 школ - и там демо сработало

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

см. замену здесь - когда я закомментировал свои исходные источники и заменил их теми же, что и в школах w3c и перезагрузил страницу - это работает 

<!--  these 4 lines do work -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<%-- these 4 lines dont work
<link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
--%>

я неУверен, что происходит, и что уже слишком поздно, чтобы понять.Однако с новыми источниками страницы начинают работать - очень странно

...