user2696392
user2696392

Reputation: 97

Weird Bootstrap bugs (table and navbar)

Table bug fixed: I was missing thead and tbody tags!

I have a weird problem with Bootstrap. Everything works perfectly fine, but when I try to use table-hover class it just does not work. Also, the table has upper border: http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png

Also, when I resize the Chrome browser, the navigation bar looks like this: http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png instead of normal 'mobile' look on getbootstrap.com site.

I am using:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">

Code:

<table id='keytable' class='table table-hover'>
<tr><th>sv_licensenum</th><th>Type</th><th>Key</th><th>Description<‌​/th></tr>
<tr><td>0</td><td>Ranked</td><td>alrCOdo8PsFUur6iZmIlESd7</td><td>test2<‌​/td></tr>
<tr><td>1</td><td>Ranked</td><td>VLnNg25kSZRB4IzNpufu0qIs</td><td>test45‌​6</td></tr>
</table>

id="keytable" is not specified in any external non-Bootstrap CSS file/code. it is only used for Javascript.

Upvotes: 1

Views: 2090

Answers (2)

Pallab
Pallab

Reputation: 285

After inspecting the file carefully I have figured the reason for this weird behavior.

You need to remove the style you have defined in you html. This is the reason the navbar gets a padding when you reach 979px or less. You can consider defining this through @media or media-query

body {
    padding-top: 60px; 
    background-color: #f5f5f5;
}

And then you have to remove the style

nav-collapse collapse

This will hide whatever you put inside this.

Read http://getbootstrap.com/2.3.2/components.html#navbar

Hope this solves your problem.

Upvotes: 0

Pallab
Pallab

Reputation: 285

I hope you have also included the required bootstrap js files. I did not get any issues when I tested the code you provided.

Upvotes: 0

Related Questions