引导电网与手风琴推底部细胞向右

我在引导此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>

来源

2016-11-22 SDJ

是可以做到这一点改变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; 
}

来源

2016-11-23 09:19:12

感谢CSS。很棒！ – SDJ

引导电网与手风琴推底部细胞向右

回答

相关问题