Question

我有此示例页面，无法正常工作。

我已加载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>

Answer 1

真的很奇怪-因此去了一个演示站点w3 schools -演示成功了

所以我需要将其中的标题粘贴到我的页面上，并注释掉我做相同内容的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>
--%>

我不确定拧紧的本质是什么，现在还为时已晚。但是，有了新资源，这些页面就开始工作了-非常奇怪

Bootstrap v4上的下拉操作问题

1 个答案: