Welcome to Qi-U Community for programmer and developer-Open, Learning and Share


0 votes
in Technique[技术] by (31.9m points)

css - Making nav-tabs work in a modified bootstrap

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:


The modified one can be accessed here:


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>

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:


Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (31.9m points)

Welcome to Qi-U Community for programmer and developer-Open, Learning and Share