在div上應用Bootstrap和Flat UI或復制所有樣式以在導航欄上使用

Question

我在Bootstrap上使用Flat UI構建了導航欄。

現在，如果我將bootstrap + flat ui添加到我擁有的另一個html + css文件中，則六邊形會被寵壞。 基本上，我的導航欄在沒有平面ui和bootstrap的情況下不起作用，而我的六角形頁面在平面ui和bootstrap的情況下不起作用，所以我不知道該怎么辦！ 請幫忙。

導航欄代碼：

    <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="brand" href="#"><img src="logo.jpg" /></a> -->
    </div>
    <!-- All the nav link -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="active"><a href="hexagons.html">Features</a></li>
        <li><a href="team.html">Team</a></li>
        <li><a href="#contact">Contact Us</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="getStarted.html"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Buy now<i class="fa fa-user-paw" aria-hidden="true"></i></a></li>

      </ul>
    </div>
    <!-- navbar collapse -->
  </div>
  <!-- container -->
</nav>

這是codepen

Answer 1

請檢查此鏈接，我已更新您的代碼。 點擊這里

<a href="https://jsfiddle.net/guruWork/tn7f952a/1/">jsfiddle</a>