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

标签 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。

最佳答案

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

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

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

然后你必须删除样式

nav-collapse collapse

这将隐藏您放入其中的任何内容。

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

希望这能解决您的问题。

关于css - 奇怪的 Bootstrap 错误(表格和导航栏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18510348/

相关文章:

javascript - 使轮播(图像 slider )在网页上移动

jquery - Bootstrap 中两行的 Logo 和菜单

html-table - 如何更改ant.design 'Table'组件的样式?

javascript - 使用 tablesorter 对 TR block 进行排序

HTML 表 : put an image or circle on border

jquery - 图像的高度没有通过 chrome 和 opera 中的 jquery height()

javascript - 我无法使用我的 javascript 代码访问 css 样式。我的代码有什么问题?

asp.net - 已部署的应用程序在 IE8 中显示不同

css - 如何在 Vue.js 中使用 PostCSS?

javascript - Angular Bootstrap UI Modal - ng-template 脚本中的访问 ID