在面板中添加一个关闭图标

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

<!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

谁能帮我修改吗？

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

来源

2016-11-12 SoftTimur

目前，“x”标志位于面板的右侧（和外侧）......我希望它位于面板内部...... – SoftTimur

，除非其父母有position: relative;与position: absolute;的元素将自己定位相对于的页面。

你需要改变什么是.x_title，就像这样：

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

通过给这个position: relative;，您actions DIV的right: 0;现指的x_title右边缘，而不是的右边缘页。

来源

2016-11-12 22:40:44 Santi

将position: relative;添加到您的.panel类中。然后它会留在面板内。

来源

2016-11-12 22:39:13

将position: relative;添加到您的.panel类中。

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

然后，它会留在面板内右侧边右上角。

来源

2016-11-13 02:03:35

在面板中添加一个关闭图标

回答

相关问题