Bootstrap 手风琴网格将底部单元格向右推

Question

我在 Bootstrap 中有这个 2x2 网格，每个单元格中都有一个简单的手风琴。在展开单元格 A 下的第一个手风琴后，它将单元格 C 推向右侧。

有没有办法防止这种行为，并在单击手风琴时将单元格 C 保留在单元格 A 下？

Link 到代码：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>

Answer 1

是的，可以这样改变 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;
}

Bootstrap 手风琴网格将底部单元格向右推

Bootstrap Grid with Accordian pushes bottom cell to the right

css

jquery-ui-accordion

twitter-bootstrap