问Option/Select菜单不显示HTML/Bootstrap
EN

Stack Overflow用户

提问于 2018-07-22 05:06:14

回答 1查看 35关注 0票数 0

我有一个非常简单的HTML文件，应该提供给用户一个选择框，他/她可以选择多个选项。

我实际上复制并粘贴了纪录片中的代码，但没有显示任何内容

这是浏览器中显示的代码，所有指向样式和css的链接都正常工作

<!DOCTYPE html>

<!--TODO make this xmlns entries inserted by the IDE at HTML creation-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr>
            <td>BMW</td>
        </tr>
        <tr>
            <td>Mercedes</td>
        </tr>
        <tr>
            <td>Audi</td>
        </tr>

    </table>
</div>
</body>

<footer>
    <script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <!--    <script th:src="@{/mainpage.js}"></script>-->
    <link href="/webjars/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

</footer>
<!-- Latest compiled and minified CSS -->

</html>

这里是IDE HTML

<!DOCTYPE html>

<!--TODO make this xmlns entries available per default creation-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${cars}">
            <td th:text="${prod}">Onions</td>
        </tr>

    </table>
</div>
</body>

<footer th:replace="template :: footer"></footer>
<!-- Latest compiled and minified CSS -->

</html>

源

知道这里的问题是什么吗？

enter link description here

jquery

html

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-22 05:39:24

您需要将Bootstrap CSS样式表和Javascript文件添加到文档中。

<!DOCTYPE html>

<!--TODO make this xmlns entries available per default creation-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${cars}">
            <td th:text="${prod}">Onions</td>
        </tr>

    </table>
</div>
</body>

<footer th:replace="template :: footer"></footer>
<!-- Latest compiled and minified CSS -->

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51460108

复制

相似问题

问Option/Select菜单不显示HTML/Bootstrap
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Option/Select菜单不显示HTML/BootstrapEN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Option/Select菜单不显示HTML/Bootstrap
EN