引导电网与手风琴推底部细胞向右
问题描述:
我在引导此2x2的网格,每个单元格一个简单的手风琴。在单元A下展开第一个手风琴后,它将单元格C推向右侧。引导电网与手风琴推底部细胞向右
是否有办法防止这种行为,并保留小区C小区A下单击手风琴时?
链接代码:https://plnkr.co/edit/BRqwLeGqAlqLSvWFQVQL?p=info
的JavaScript:
<script>
$(function() {
$(".accordion").accordion({
collapsible: true,
active: false
});
});
</script>
HTML:
<div class="container">
<div class="row">
<div class="col-xs-6">
<span>A</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
<div class="col-xs-6">
<span>B</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
<div class="col-xs-6">
<span>C</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
<div class="col-xs-6">
<span>D</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
</div>
</div>
答
是可以做到这一点改变HTML有点像这样
<body>
<div class="container">
<div class="">
<div class="col-xs-6">
<div class="row">
<span>A</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
<div class="row">
<span>C</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<span>B</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
<div class="row">
<span>D</span>
<div class="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et</p>
</div>
</div>
</div>
</div>
</div>
,改变这样
<style>
.col-xs-12 {
background-color: blue;
color: white;
text-align: center;
border: 1px solid black;
}
.col-xs-6 {
background-color: yellow;
color: black;
text-align: center;
}
.col-xs-6 .row{
border: 1px solid black;
padding: 15px 15px 0px 15px;
}
感谢CSS。很棒! – SDJ