javascript – bootstrap“tooltip”和“popover”在表中添加额外的大小

Note:
Depending on you Bootstrap version (prior to 3.3 or not), you may need a different answer.
Pay attention to the notes.

当我在此代码中激活工具提示(悬停在单元格上)或popovers时,表的大小正在增加。如何避免这种情况?

这里的emptyRow – 函数生成tr用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>

谢谢!

Note: Solution for Bootstrap 3.0 ~ 3.2

你需要在td中创建一个元素,并向它应用一个工具提示,比如this,因为一个工具提示本身是一个div,当它放在一个td元素之后,它会制定表格布局。

这个问题是与最新版本的Bootstrap一起引入的。有关于GitHub here上的修复正在进行的讨论。希望下一个版本包括固定的文件。

http://stackoverflow.com/questions/13268361/bootstrap-tooltip-and-popover-add-extra-size-in-table

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – bootstrap“tooltip”和“popover”在表中添加额外的大小