奇怪的Bootstrap错误(表和导航栏)

时间:2013-08-29 11:57:28

标签: css twitter-bootstrap html-table border

修复了表错误:我错过了thead和tbody标签!

Bootstrap我有一个奇怪的问题。一切都运行得很好,但是当我尝试使用table-hover类时它就不起作用了。此外,该表格还有上边框:http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png

此外,当我调整Chrome浏览器的大小时,导航栏如下所示: http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png 而不是普通的'移动'看看getbootstrap.com网站。

我正在使用:

<!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">

代码:

<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”未在任何外部非Bootstrap CSS文件/代码中指定。它仅用于Javascript。

2 个答案:

答案 0 :(得分:0)

我希望您还包含了所需的bootstrap js文件。当我测试你提供的代码时,我没有遇到任何问题。

答案 1 :(得分:0)

仔细检查文件后,我已经找到了这种奇怪行为的原因。

您需要删除您在html中定义的样式。这是导航栏在达到979px或更低时获得填充的原因。您可以考虑通过@media或media-query

来定义它
body {
    padding-top: 60px; 
    background-color: #f5f5f5;
}

然后你必须删除样式

nav-collapse collapse

这会隐藏你放在里面的东西。

阅读http://getbootstrap.com/2.3.2/components.html#navbar

希望这能解决你的问题。