0
我有一个非常简单的弹窗问题。所以我决定用bootstrap页面的例子来测试，没有symfony没有问题，但是用symfony和twig这个按钮并没有什么作用。Symfony2引导弹窗不起作用
在此之前，我使用jQuery mobile进行了测试，弹出窗口是整页而不是弹出窗口。
我不知道问题在哪里，因为您事先要求您的帮助:)。
Firefox中的源代码看起来不错，没有symfony的代码，当我查看浏览器代码源时，它是一样的：x。
从头无SF：
<html>
<head>
\t <title>popover</title>
\t <link rel="stylesheet" href="bootstrap.min.css">
\t <script src="jquery-2.1.4.min.js"></script>
\t <script src="bootstrap.min.js"></script>
</head>
<body>
\t <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
//here all it's ok
<script>
\t $(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
和蒙山SF：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sebastien Caumes</title>
<link rel="stylesheet" href="/sebastiencaumes/web/bundles/scsebastiencaumes/css/bootstrap.min.css">
<link rel="stylesheet" href="/sebastiencaumes/web/bundles/scsebastiencaumes/css/global.css">
<link rel="icon" type="image/x-icon" href="/sebastiencaumes/web/favicon.ico" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header">
<button type="button" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i>
</button>
HEADER
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
DESCRIPTIF COMPETENCES ETC
</div>
<div class="col-md-6">
<div class="test-box">projet1
<a href="/sebastiencaumes/web/app_dev.php/work/3">clic</a>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</div>
<div class="test-box">projet2</div>
<div class="test-box">projet3</div>
<div class="test-box">projet4</div>
<div class="test-box">projet5</div>
<div class="test-box">projet6</div>
<div class="test-box">projet7</div>
<div class="test-box">projet8</div>
<div class="test-box">projet9</div>
<div class="test-box">projet10</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
FOOTER
<div class="pull-right">
<i class="glyphicon glyphicon-blackboard"></i>
<i class="glyphicon glyphicon-blackboard"></i>
<i class="glyphicon glyphicon-blackboard"></i>
</div>
</div>
</div>
</div>
<script src="/sebastiencaumes/web/bundles/scsebastiencaumes/js/jquery-2.1.4.min.js"></script>
<script src="/sebastiencaumes/web/bundles/scsebastiencaumes/js/bootstrap.min.js"></script>
<script src="/sebastiencaumes/web/bundles/scsebastiencaumes/js/global.js"></script>
</body>
</html>
和SF页蒙山jQuery函数：
{% extends'SCSebastienCaumesBundle::layout.html.twig' %}
{% block portfolio %}
<div class="test-box">projet1
<a href="{{ path('sc_sebastien_caumes_work_detail', {id : 3}) }}">clic</a>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing
content. It's very engaging. Right?">Click to toggle popover</button>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</div>
<div class="test-box">projet2</div>
<div class="test-box">projet3</div>
<div class="test-box">projet4</div>
<div class="test-box">projet5</div>
<div class="test-box">projet6</div>
<div class="test-box">projet7</div>
<div class="test-box">projet8</div>
<div class="test-box">projet9</div>
<div class="test-box">projet10</div>
{% endblock %}
我认为它是一个非常简单的问题，但我没有看到它。
请编辑您的示例，它们似乎混杂在一起 – DelightedD0D