codeigniter - 为什么我的导航栏没有背景颜色和垂直列表?
问题描述
我目前正在使用 bootstrap 4 和 CodeIgniter 作为后端制作网站。但是由于某种原因,导航栏变得很奇怪。
在此处输入图片描述(我仍然没有足够的点来发布图片)
没有导航栏颜色,更不用说,列表是垂直的,而不是水平的。
这是我的代码:
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li><a href="<?php echo base_url(); ?>">Home</a></li>
<li><a href="<?php echo base_url(); ?>/about">About</a></li>
</ul>
</div>
</div>
</nav>
编辑:
我在 youtube 上关注 Traversy Media 的 CodeIgniter 教程。我已按照所有步骤操作,但导航栏变得很奇怪。
解决方案
只需转到此链接https://bootswatch.com/flatly/
从此链接
复制源代码
在这里你的解决方案: -
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url(); ?>">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url(); ?>/about">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
推荐阅读
- html - 添加容器 div 会移除 flexbox
- amazon-s3 - Amazon S3 PDF files have wrong content type after Winscp upload
- python - Python to PHP? For twitter scraper (Scweet)
- javascript - 使用 Map 解析列表项的正确方法是什么?
- python - discord bot - userinfo command "IndentationError: unexpected indent"
- intellij-idea - IntelliJ 中的奇怪 V
- python - Python Selenium 文本从 for 循环中提取列表输出
- python - 主要代码正在运行,但其他代码未运行
- android - 尽管已经有背景,如何从edittext行中删除下划线
- reactjs - Material UI 日期选择器在移动设备上的行为不同