Question

有任何解决此问题的建议吗？如果我从title="1"中删除a，元素抖动将消失。

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script type="text/javascript">  
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>
</head>
<body>

<div class="container">
    <div class="list-group">
        <a data-toggle="tooltip" href="TEST.ASP" class="list-group-item" title="1">First item</a>
    </div>
</div>

<div class="container">
    TEST
</div>

</body>
</html>

Answer 1

在列表的第一个孩子的末尾添加边距0，请检查以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script type="text/javascript">  
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>
</head>
<body>
<style>
.list-group-item:first-child {
 margin-bottom:0; 
}
</style>
<div class="container">
    <div class="list-group">
        <a data-toggle="tooltip" href="TEST.ASP" data-toggle="tooltip" data-placement="bottom" class="list-group-item" title="1">First item</a>
    </div>
</div>

<div class="container">
    TEST
</div>

</body>
</html>

Bootstrap列表组内带有标题和工具提示的链接动摇了底部内容

1 个答案: