Question

我已经看到以下答案：

1）Twitter's Bootstrap popover not working

2）Twitter bootstrap .popover not working

没有人帮助我解决问题。

我正在尝试在Bootstrap中使用Popover，我点击按钮但没有弹出窗口。

我找不到问题。这是popover的HTML代码，我从文档中得到了它。

        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on top
        </button>

这是与进口相关的代码。

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/style/global.css">
<link rel="stylesheet" href="/bower_components/lightslider/dist/css/lightslider.css">
<link rel="stylesheet" type="text/css" href="/style/flags/flags.css"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/script/index.js"></script>
<script src="/bower_components/popper.js/dist/popper.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/lightslider/dist/js/lightslider.js"></script>

Answer 1

根据我们在评论中的讨论 - 这里可能的罪魁祸首是Bower。 Bootstrap在V4中放弃了Bower，转而使用纱线或npm：

由于包管理器已被弃用，因此删除了Bower支持替代品（例如，纱线或npm）。有关详细信息，请参阅 bower / bower＃2298 。

https://getbootstrap.com/docs/4.0/migration/#breaking

依靠不同的包管理器或手动包含Bootstrap是确保所有CSS和JavaScript（与Bootstrap相关）符合V4要求的最佳途径。

Answer 2

您可能错过了popover的实例...尝试添加

import UIKit

struct Question {
    var questionString: String?
    var answers: [String]?
    var selectedAnswerIndex: Int?
}

class QuestionController: UITableViewController {

    let cellId = "cellId"
    let headerId = "headerId"

    var questionsList: [Question] = [Question(questionString: "What is your favorite type of food?", answers: ["Sandwiches", "Pizza", "Seafood", "Unagi"], selectedAnswerIndex: nil), Question(questionString: "What do you do for a living?", answers: ["Paleontologist", "Actor", "Chef", "Waitress"], selectedAnswerIndex: nil), Question(questionString: "Were you on a break?", answers: ["Yes", "No"], selectedAnswerIndex: nil)]

    class QuestionController: UITableViewController {

        let cellId = "cellId"
        let headerId = "headerId"

        override func viewDidLoad() {
            super.viewDidLoad()

            navigationItem.title = "Question"

            navigationController?.navigationBar.tintColor = UIColor.white
            navigationItem.backBarButtonItem = UIBarButtonItem(title: "Back", style: .plain, target: nil, action: nil)

            tableView.register(AnswerCell.self, forCellReuseIdentifier: cellId)
            tableView.register(QuestionHeader.self, forHeaderFooterViewReuseIdentifier: headerId)

            tableView.sectionHeaderHeight = 50
            tableView.tableFooterView = UIView()
        }

        override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

            if let index = navigationController?.viewControllers.index(of: self) {
                let question = questionsList[index]
                if let count = question.answers?.count {
                    return count

并验证您的链接是否正确。同时验证其要求here

Answer 3

请进行以下更改，然后重试。

在''。

之前将css文件包含在head部分和JS文件中

还要添加以下js代码：

$(document).ready(function () {$(function () {
  $('[data-toggle="popover"]').popover()
});

主要问题在于css冲突：

用这个

替换你的按钮

<button type="button" class="btn btn-default povr" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

并添加此css

.povr{ margin-top:50px;}

这将解决问题。根据需要更改CSS。

Fiddle

我的Bootstrap popover无法正常工作，我该怎么调试呢？

3 个答案: