我一直在试图弄清楚为什么行彼此如此靠近,而每行的底部应该有边距/填充。
请参阅“受影响的区域”,其余行堆叠在下方,除非我放置
,否则根本没有间距。如果我将它们从 Accordion 中移除,它会正确呈现意味着它们之间有间距。当您将鼠标悬停在侧边菜单上时,还有什么想法可以使页面平滑,它看起来很慢而且断断续续。
http://markestrada.co.uk/cm/ticket/test.php
<div class="col-md-3"> <!-- Area affected block -->
<div class="row">
<div class="col-md-12">
<div class="panel panel panel-default">
<div class="panel-heading">Area Affected</div>
<div class="panel-body">
backend login is not working
</div>
</div>
</div>
</div><br>
<div class="row">
<div class="col-md-12">
<div class="panel panel panel-default">
<div class="panel-heading">Step to replicate issue</div>
<div class="panel-body">
go to wp-admin
</div>
</div>
</div>
</div> <br>
<div class="row">
<div class="col-md-12">
<div class="panel panel panel-default">
<div class="panel-heading">Urls</div>
<div class="panel-body">
<a href="#">Ticket live link</a> <br />
<a href="#">Internal QA link</a> <br />
<a href="#">External QA link</a> <br />
</div>
</div>
</div>
</div>
</div> <!-- Area affected block -->
此外,人字形不工作,当您单击 Accordion 时,它应该会上下移动。 https://jsfiddle.net/tjj72mek/
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
最佳答案
<div class="col-md-3"> <!-- Area affected block -->
<div class="panel panel-default">
<div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Area Affected</a></div>
<div class="panel-body">
backend login is not working
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Step to replicate issue</a></div>
<div class="panel-body">
go to wp-admin
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Urls</a></div>
<div class="panel-body">
<a href="#">Ticket live link</a> <br>
<a href="#">Internal QA link</a> <br>
<a href="#">External QA link</a> <br>
</div>
</div>
关于jquery - Bootstrap Accordion 嵌套网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31338760/