Boostrap 4的导航栏与Metronic发生冲突

时间:2018-01-23 04:08:30

标签: css bootstrap-4 metronic

我目前在我的项目中使用了2个CSS模板:一个来自Bootstrap 4,另一个来自Metronic。看起来这两个CSS之间存在冲突,所以我的navbar看起来不正确。我已经将Bootstrap CSS放在Metronic CSS之上,但我的navbar仍然无法正常工作。

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../assets/demo/default/base/style.bundle.css" />

我已经做了相反的事情,但它并没有改变任何事情。这是navbar的源代码:

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-primary " >
<a class="navbar-brand" href="<?php echo base_url()?>" style="margin-right:-80px">
  <img src="<?php echo asset_url()?>images/logosmkn.png" style="max-width: 50%">
</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
 </button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item ">
      <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()?>home/register">Pendaftaran</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="<?php echo base_url()?>home/hasil">Hasil Seleksi PPDB</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="<?php echo base_url()?>home/pengumuman">Pengumuman/Berita</a>
    </li>
  </ul>
  <ul class="navbar-nav navbar-right">
    <li class=" nav-item">
      <?php if (isset ($_SESSION['nama_lengkap'])){?>
      <img src="<?php echo asset_url()?>images/user_m2.png" class="rounded-circle" style="max-width: 10%; float:right">
      <?php }?>
    </li>
    <li class="nav-item active ">
      <a class="nav-link href" href="<?php echo base_url()?>home/logout" ><?php 
        if (isset ($_SESSION['nama_lengkap'])){
        echo $this->session->userdata('nama_lengkap');
        }?>
      </a>
    </li>
  </ul>
</div>

The issues with the navbar.当我删除Metronic CSS时,navbar工作正常。

0 个答案:

没有答案