Bootstrap Grid с Accordian толкает нижнюю ячейку вправо

У меня есть эта сетка 2x2 в Bootstrap с простым аккордеоне в каждой ячейке. При расширении первого аккордеона под ячейкой А он сдвигает ячейку С вправо.Bootstrap Grid с Accordian толкает нижнюю ячейку вправо

Есть ли способ предотвратить это поведение и сохранить ячейку 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>

и изменить CSS, как этот

<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

Спасибо. Прекрасно работает! – SDJ

Bootstrap Grid с Accordian толкает нижнюю ячейку вправо

ответ

Смежные вопросы