使用cakephp不显示Bootstrap3导航条折叠。
使用cakephp不显示Bootstrap3导航条折叠。
提问于 2017-03-20 02:11:59
一个月前，我开始使用cakephp框架工作。我很难制作一个移动响应导航栏。我在Cake中使用了以下引导程序：https://startbootstrap.com/template-overviews/round-about/
问题是，当单击导航条时，就不会显示其崩溃。
以下是相关的ctp文件：
default.ctp
<?php$cakeDescription = 'BuySellSFSU';?>
<!DOCTYPE html>
<html>
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?= $cakeDescription ?>:
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css('bootstrap.css') ?>
<?= $this->Html->css('bootstrap.min.css') ?>
<?= $this->Html->css('round-about.css') ?>
<?= $this->Html->script('bootstrap.js') ?>
<?= $this->Html->script('bootstrap.min.js') ?>
<?= $this->Html->script('jquery.js') ?>
<?= $this->Html->script('custom.js') ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
</head>
<body>
<!-- Navigation -->
<?= $this->element('header') ?>
<div id="content" class="container">
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
<hr>
<!-- Footer -->
<?= $this->element('footer') ?>
</div>
</body>
</html>header.ctp
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BuySellStuffs</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<?php echo $this->Html->link('About', array('controller'=>'pages', 'action'=>'home', 'full_base'=>true)); ?>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>头痛的问题
谢谢你的帮助，真的很感激。:D
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-20 02:38:03
只需尝试在引导之前加载jquery并删除bootstrap.min (css和js)。
<?= $this->Html->script('custom.js') ?>
<?= $this->Html->script('jquery.js') ?>
<?= $this->Html->script('bootstrap.js') ?>
<?= $this->Html->css('bootstrap.css') ?>
<?= $this->Html->css('round-about.css') ?>Stack Overflow用户
发布于 2017-03-20 02:21:12
更改bootstrap.min.js和jquery.js顺序，不包括bootstrap.min.js和bootstrap.js，只使用一个。
在引导js之前加载Jquery：
<?= $this->Html->script('jquery.js') ?>
<?= $this->Html->script('bootstrap.min.js') ?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42894794
复制相关文章
相似问题
腾讯云开发者
