Accordianを使用したブートストラップグリッドは、ボトムセルを右にプッシュします

各セルに簡単なアコーディオンを持つブートストラップに2x2グリッドがあります。セルAの下の最初のアコーディオンを展開すると、セルCを右に押します。Accordianを使用したブートストラップグリッドは、ボトムセルを右にプッシュします

この現象を回避し、アコーディオンをクリックするとセルCの下にセルCを維持する方法はありますか？コードへ

リンク：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

はい、これは少しこの

<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>

ようなHTMLを変更行うことができます

この

<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

Accordianを使用したブートストラップグリッドは、ボトムセルを右にプッシュします

答えて

関連する問題