每当我添加折叠和导航栏折叠时,“ ul”和“ li”完全消失

时间:2019-03-27 01:36:41

标签: html css twitter-bootstrap

按照引导网站的指示,我已将引导css js和jQuery添加到页面底部,但是仍然每当我添加崩溃和navbar-collapse类时,所有ul和li都消失了“ intellisense不会让我崩溃,反而会使我崩溃”。

<!DOCTYPE html>
<html>
<head>
    <title>Camp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Camp</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav nav-pills justify-content-end ">
                    <li class="nav-item"><a href="/">Login</a></li>
                    <br />
                    <li class="nav-item"><a href="/">Sign Up</a></li>
                    <br />
                    <li class="nav-item"><a href="/">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<head>
    <title>Camp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-md navbar-light bg-light mb-4" >
        <a class="navbar-brand" href="/">Camp</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" href="/campgrounds">Home</a></li>
                </ul>
                <ul class="navbar-nav">
                   <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
                   <li class="nav-item"><a class="nav-link" href="/register">Sign Up</a></li>
                </ul>
            </div>
    </nav>