html - 注销 Bootstrap 崩溃

Question

大家好，我正在使用 Bootstrap Collapse:https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

它工作完美，但我必须添加背景和填充 10px，这破坏了 Accordion 效果，有人知道如何解决这个问题吗？

如果我删除填充效果很好，但我需要填充。

谢谢。

jsfiddle:https://jsfiddle.net/a759nymd/

$(document).click(function(e) {
	if (!$(e.target).is('.collapse-logout')) {
    	$('.collapse').collapse('hide');	    
    }
});

.collapse-logout {
    background: black;
    color: #27a0d7;
    cursor: pointer;
    border-radius: 5px;
    height: 40px;
    padding:10px;
}

<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <div class="user-logout">
        <label class="" data-toggle="collapse" data-target="#demo">
          Hi,<strong>${ username }<b class="caret"></b></strong>
        </label>
        <div id="demo" class="collapse collapse-logout">
          <i class="fa fa-power-off" aria-hidden="true"></i>Logout
        </div>
      </div>

Answer 1

您可以将 Accordion 内容包装在 div 中，然后将填充应用于该内部 div

$(document).click(function(e) {
	if (!$(e.target).is('.collapse-logout')) {
    	$('.collapse').collapse('hide');	    
    }
});

.collapse-logout {
    background: black;
    color: #27a0d7;
    cursor: pointer;
    border-radius: 5px;
    height: 40px;
    
}

.collapse-body {
    padding:10px;
}

<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <div class="user-logout">
        <label class="" data-toggle="collapse" data-target="#demo">
          Hi,<strong>${ username }<b class="caret"></b></strong>
        </label>
        <div id="demo" class="collapse collapse-logout">
          <div class="collapse-body">
            <i class="fa fa-power-off" aria-hidden="true"></i>Logout
          </div>
        </div>
      </div>

更新后的 fiddle
https://jsfiddle.net/a759nymd/4/