Question

我有一个完美运行的固定导航栏（使用navbar.css）。但是当我在页面上添加另一个元素所需的bootstrap.css时，导航栏会中断。以下是我试图解决冲突的问题：

在navbar.css文件

bootstrap.css

将!important添加到navbar.css中的每个项目，并将链接引用与
此其他元素并未使用整个bootstrap.css文件，因此我使用了firebug来消除所有未使用的css（低至＆lt; 500行扩展CSS）
逐行浏览我修改后的bootstrap.css文件并删除对导航栏的任何引用（导航标记等）

但导航栏仍然断裂。这是导航栏和我的CSS的代码：

HTML

<nav class='sidebar sidebar-menu-collapsed'>
  <ul>
    <li>
      <a class='expandable' href='#'>
        <span><i class="fa fa-align-justify  fa-2x" aria-hidden="true" id='justify-icon'></i></span>
      </a>
    </li>
    <li>
      <a class='expandable' href='myshares.php' title='My Archives'>
        <span><i class="fa fa-archive fa-2x" aria-hidden="true"></i></span>
        <span class='expanded-element'>My Archives</span>
      </a>
    </li>
    <li>
      <a class='expandable' href='sharedwithme.php' title='Shared w/ Me'>
        <span><i class="fa fa-inbox  fa-2x" aria-hidden="true"></i></span>
        <span class='expanded-element'>Shared w/ Me</span>
      </a>
    </li>
    <li class="active">
      <a class='expandable' href='#' title='Add a Share'>
        <span><i class="fa fa-plus-square fa-2x" aria-hidden="true"></i></span>
        <span class='expanded-element'>Add Share</span>
      </a>
    </li>
    <li>
      <a class='expandable' href='tools.html' title='Tools'>
        <span><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></span>
        <span class='expanded-element'>Tools</span>
      </a>
    </li>
    <li>
      <a class='expandable' href='howitworks.html' title='How this Works'>
        <span><i class="fa fa-question fa-2x" aria-hidden="true"></i></span>
        <span class='expanded-element'>How This Works</span>
      </a>
    </li>
    <li>
      <a class='expandable' href='logout.php' title='Logout'>
        <span><i class="fa fa-power-off fa-2x" aria-hidden="true"></i></span>
        <span class='expanded-element'>Logout</span>
      </a>
    </li>
  </ul>
</nav>

CSS

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"; 
@import "https://www.sonoclipshare.com/public/bootstrap.css";
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: none repeat scroll 0 0 white;
}

nav.sidebar-menu-collapsed {
  width: 34px;
}

nav.sidebar-menu-expanded {
  width: 116px;
}

nav.sidebar {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  background: none repeat scroll 0 0 #0099ff;
  color: white;
  padding: 20px 10px;
  text-align: left;
}

nav.sidebar a#justify-icon {
  outline: 0;
  color: white;
  font-size: 24px;
  font-style: normal;
}

nav.sidebar a#logout-icon {
  outline: 0;
  color: white;
  font-size: 24px;
  font-style: normal;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

nav.sidebar ul {
  margin: 0;
  padding: 0;
  margin-top: 60px;
}

nav.sidebar ul li {
  margin: 0;
  padding-left: 3px;
  margin-top: 20px;
  list-style-type: none;
}

nav.sidebar ul li a.expandable {
  outline: 0;
  color: white;
  text-decoration: none;
}

nav.sidebar ul li a.expandable:hover {
  color: #bbbbbb;
}

nav.sidebar ul li a.expandable span.expanded-element {
  margin-left: 2px;
  display: none;
  font-size: 11px;
  position: relative;
  bottom: 2px;
}

nav.sidebar ul li.active {
  background: none repeat scroll 0 0 black;
  border-radius: 4px;
  padding: 4px;
}

nav.sidebar ul li.active a.expandable {
  color: white;
}

nav.sidebar ul li.active a.expandable:hover {
  color: white;
}

#justify-icon {
  margin-bottom: 40px;
}

.fa-power-off {
  margin-top: 40px;
}

JQuery的

$(document).ready(function() {
  function expandMyMenu() {
    $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
  };

  function collapseMyMenu() {
    $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
  };

  function showMenuTexts() {
    $("nav.sidebar ul a span.expanded-element").show();
    $("nav.sidebar ul a span.expanded-element").css('display', 'inline');
  };

  function hideMenuTexts() {
    $("nav.sidebar ul a span.expanded-element").hide();
  };
  $("#justify-icon").click(function(e) {
    if ($("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
      expandMyMenu();
      showMenuTexts();
      $(this).css({
        color: "#000"
      });
    } else if ($("nav.sidebar").hasClass("sidebar-menu-expanded")) {
      collapseMyMenu();
      hideMenuTexts();
      $(this).css({
        color: "#FFF"
      });
    }
  });
});

如果我删除违规行@import "https://www.sonoclipshare.com/public/bootstrap.css";，则导航条看起来应该如此。这是一个codepen来玩。我在这里遗漏了500行bootstrap.css空间。这里有jsfiddle所有css

Answer 1

违规行，是bootstrap css的cdn吗？尝试将其放入代码的head部分，从官方来源导入它;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Answer 2

我删除了css的这一部分

nav.sidebar-menu-collapsed { 
  width: 34px;
}

并且导航栏看起来更好。

Answer 3

好吧，我能够缩小我的其他代码在引导程序中使用的css，并且只包括它。仍然不是100％确定引导程序的哪一部分正在影响我的代码，但这是一个简单的消除过程，让我得到了答案。蛮力再次袭来。感谢大家的建议。

navbar css被transstrap.css覆盖

3 个答案: