问题描述
注意:
根据您的 Bootstrap 版本(3.3 之前与否),您可能需要不同的答案.
注意笔记.
当我在此代码中激活工具提示(将鼠标悬停在单元格上)或弹出框时,表格的大小会增加.我怎样才能避免这种情况?
When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How can I avoid this?
这里是 emptyRow - 用 100 生成 tr 的函数
Here emptyRow - function to generate tr with 100
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<style>
#matrix td {
width: 10px;
height: 10px;
border: 1px solid gray;
padding: 0px;
}
</style>
<script>
function emptyRow() {
str = '<tr>'
for (j = 0; j < 100; j++) {
str += '<td rel="tooltip" data-original-title="text"></td>'
}
str += '</tr>'
return str
}
$(document).ready(function () {
$("#matrix tr:last").after(emptyRow())
$("[rel=tooltip]").tooltip();
});
</script>
</head>
<body style="margin-top: 40px;">
<table id="matrix">
<tr>
</tr>
</table>
</body>
</html>
多谢指教!
推荐答案
您需要在 td
内创建一个元素并为其应用工具提示,例如 this,因为工具提示本身是一个 div,当它被放置在 td
元素之后时,它会阻止表格布局.
You need to create an element inside a td
and apply a tooltip to it, like this, because a tooltip itself is a div, and when it is placed after a td
element it brakes table layout.
这个问题是在最新版本的 Bootstrap 中引入的.在GitHub 此处上正在进行有关修复的讨论.希望下一个版本包含修复文件.
This problem was introduced with the latest release of Bootstrap. There are ongoing discussions about fixes on GitHub here. Hopefully the next version includes the fixed files.
这篇关于引导程序“工具提示"和“弹出框"在表格中添加额外的尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!