Accordian이있는 부트 스트랩 그리드가 맨 아래 셀을 오른쪽으로 밀어냅니다.

각 셀에 간단한 아코디언이있는 부트 스트랩에 2x2 그리드가 있습니다. 셀 A에서 첫 번째 아코디언을 확장하면 셀 C가 오른쪽으로 밀려납니다.Accordian이있는 부트 스트랩 그리드가 맨 아래 셀을 오른쪽으로 밀어냅니다.

이 동작을 방지하고 아코디언을 클릭 할 때 셀 C 아래에 셀 C를 유지할 수있는 방법이 있습니까? 코드에

링크 : https://plnkr.co/edit/BRqwLeGqAlqLSvWFQVQL?p=info

자바 스크립트 :

<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

Accordian이있는 부트 스트랩 그리드가 맨 아래 셀을 오른쪽으로 밀어냅니다.

답변

관련 문제