Html Codeigniter 3.1-引导4导航条赢得'；t崩溃_Html_Twitter Bootstrap_Codeigniter

Html Codeigniter 3.1-引导4导航条赢得'；t崩溃

html twitter-bootstrap codeigniter

Html Codeigniter 3.1-引导4导航条赢得'；t崩溃,html,twitter-bootstrap,codeigniter,Html,Twitter Bootstrap,Codeigniter,我在CodeIgniter 3.1.6+Bootstrap 4.0-beta 2中使用了这段代码，当导航栏崩溃时，导航栏不再可导航；点击按钮不会发生任何事情。同样的代码在bootply上试过了，但却能正常工作，有人能解释一下原因吗 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> <button class="navbar-toggler" type="button" data-to

我在CodeIgniter 3.1.6+Bootstrap 4.0-beta 2中使用了这段代码，当导航栏崩溃时，导航栏不再可导航；点击按钮不会发生任何事情。同样的代码在bootply上试过了，但却能正常工作，有人能解释一下原因吗

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">
            {url type="anchor" url="" text=$header.site_title|escape:"html":"UTF-8" attr="class='navbar-brand'"}
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ml-auto">
            {if $current_user.user_role eq 'Admin'}
                    <li class="nav-item">
                                            <a class="nav-link" href="/index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/admin">Admin</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
                {elseif $current_user.user_role eq 'Buyer'}
                    <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
                {elseif $current_user.user_role == 'Vendor'}
                    <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>

                {elseif $current_user.user_role == 'half'}
                    {if $allow_guests eq TRUE}
                        <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    {/if}
                    <li class="nav-item"><a class="nav-link">Logout</a></li>
                {else}
                    {if $allow_guests eq TRUE}
                        <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    {/if}
                    <li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
                {/if}
        </ul>
            </div>
    </div>


{url type=“anchor”url=”“text=$header.site_title | escape:“html”：“UTF-8”attr=“class='navbar-brand'”}

{如果$current\u user.user\u角色eq'Admin'}







{elseif$current_user.user_role eq'Buyer'}





{elseif$current_user.user_role=='Vendor'}





{elseif$current_user.user_role=='half'}
{如果$allow_eq TRUE}


{/if}


{/if}


{/if}

以下是引导层的链接：执行代码并缩放窗口菜单保持可点击状态

生成的HTML

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="container">
    <a href="/index.php" class='navbar-brand'>Brand</a>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ml-auto">
                                                                <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                                            <li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
                            </ul>
    </div>
</div>

首先，您应该知道CodeIgniter在生成HTML后无法更改HTML的行为方式。现代浏览器应该可以很好地显示生成的HTML

我使用了Bootstrap 4初学者模板：

您发布的代码（以及生成的HTML）缺少结束导航标记。即使没有结束导航标记，代码在插入初学者模板时也可以工作。这可能意味着错误源在您的模板中，或者您没有向我们显示的代码中

由于您使用的是.navbar expand sm，navbar将以576px的速度切换到小型设备模式。在浏览器中查看以下代码时，我没有遇到任何问题：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Stack Overflow Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    </head>
    <body>

        <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="container">
                <a href="/index.php" class='navbar-brand'>Brand</a>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
                    </ul>
                </div>
            </div> 
        </nav>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>


堆栈溢出示例

如果您在浏览器中运行此功能，并且仍然存在问题，则可能您的浏览器不支持bootstrap 4的更新功能。我知道这不是一个很好的答案，但我试图帮助您解决问题。

修复了标题中缺少的popper.js

您正在加载引导js文件吗？浏览器开发控制台中有404错误或js错误吗？引导程序已正确加载，只是折叠不起作用。这是您的视图，对吗？我们如何知道变量的自定义handlebar+dot语法正在生成什么？您应该只发布生成的HTML。