Question

我想在面板标题的右侧添加一个关闭图标。但我不能把它放在小组内：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <title>JS Bin</title>
  <style>
      .panel {
      background: #FFFFFF;
      padding: 7px 10px;
      }

      .x_title {
      border-bottom:2px solid #E6E9ED;
      margin-bottom:10px;
      padding:1px 5px 6px;
      font-size:16px;
      }

      .x_title .actions {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 3
      }

      .x_title .list-inline {
      margin-left: -13px;
      padding-left: -5px;
      }

      .x_content {
      margin-top:5px;
      padding:0 5px 6px;
      }
  </style>
</head>
<body>
  <div class="panel">
    <div class="x_title">
      Panel
      <div class="actions list-inline">
        <a href="#" onclick="$('.panel').hide(); $('#br').hide();">&times;</a>
      </div>
    </div>
    <div class="x_content">
      Content
    </div>
  </div>
</body>
</html>

JSBin

有人可以帮我修改吗？

此外，我不知道这是否是添加关闭图标的最佳方式。 Bootstrap有modal，但似乎模态用于弹出窗口，而不是页面内的面板。有没有人知道Bootstrap和JQuery添加关闭图标（甚至是折叠图标）的最常规方法是什么？

Answer 1

将position: relative;添加到.panel课程。然后它会留在面板内。

Answer 2

将position: relative;添加到.panel课程。

position: absolute; right: 5px; top: 5px;到.actions类

然后它会留在面板右上角。

Answer 3

position: absolute;元素将相对于页面定位，除非其父级有position: relative;。

您需要更改的内容是.x_title，如下所示：

.x_title {
    border-bottom:2px solid #E6E9ED;
    margin-bottom:10px;
    padding:1px 5px 6px;
    font-size:16px;
    position: relative;
 }

通过提供position: relative;，right: 0; div上的actions现在指的是x_title的右边缘，而不是页面的右边缘。< / p>

在面板中添加关闭图标

3 个答案: