如何解决CakePHP 4:毫克CSS与Bootstrap CSS冲突
我的default.php布局中有一个Bootstrap导航栏。它的工作原理和外观都不错,但字体大小和位置会受到毫克干扰。它会缩小文本并向上移动文本。当我从已加载的css文件列表中删除milligram.min时,导航栏会正确显示,但是随后我丢失了要保留的所有mg样式。理想情况下,我希望导航栏和毫克样式出现在项目的每个页面上。
下面的代码。导航栏是正文中的第一个元素:
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="../css/tokenize2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- CSS for dropdown hover -->
<style type="text/css">
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{ color: #fff; }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/* ============ desktop view .end// ============ */
</style>
<title>
<?= $cakeDescription ?>:
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<?= $this->Html->css(['normalize.min','milligram.min','cake','divtable']) ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
</head>
<body>
<?= $this->element('nav'); ?>
<main class="main">
<div class="container">
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
</div>
</main>
<footer>
<?= $this->element('footer'); ?>
</footer>
</body>
有什么办法可以使毫克忽略这一元素?这是我的默认布局唯一破坏了项目的东西。我尝试将$this->element('nav')
包装在其自己的div
标签中,并直接应用导航样式,并且还尝试重新排序CSS加载。不高兴。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。