引導電網與手風琴推底部細胞向右

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

引導電網與手風琴推底部細胞向右

回答

相關問題