css - Making nav-tabs work in a modified bootstrap

Question

So I started a self-teaching project to get myself up to speed on JQuery, PHP and to improve my understanding of CSS and to give me a framework to start with I download a Bootstrap e-commerce theme to which I've been applying my various PHP and JQuery code snippets.

I'm just now trying to implement nav-tabs on one of the pages but I realise that this function is broken in the bootstrap.css file supplied with the theme. If I swap out this bootstrap for the 'normal' one then the nav-tabs work but lots of other visual elements get corrupted or broken. So I have two choices - either rewrite the 'normal' bootstrap to try implement these visual changes or try fix the nav-tabs in the modified file. My preference is for the latter.

The 'normal' CSS is this one:

https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css

The modified one can be accessed here:

http://pickarooney.sytes.net/eshop/css/bootstrap_eshop.css

This basic code snippet works OK with the normal but in the modified one the tabs don't display at all. I tested with nav-pills also but no luck.

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

I've tried just copying and pasting the entire .nav-tabs section from the standard to the modified CSS but that did not work. CSS is a real weak point for me so I've kind of hit the wall here.

I put a sample fiddle with the two CSS files (comment out the one not used) here:

https://jsfiddle.net/k0pnLy3u/

Answer 1

等待大神答复