展开项目在两列布局中跳转

我的网站上有一个 Bootstrap 手风琴，并将其拆分为两列布局，如下所示：

#accordion {
  column-count: 2;
}
.card {
  margin: 0px 20px 20px 20px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
a{
  display:block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading1">
      <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
    </div>
    <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading2">
      <button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
    </div>
    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading3">
      <button class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Heading3</button>
    </div>
    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading4">
      <button class="btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Heading4</button>
    </div>
    <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading5">
      <button class="btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">Heading5</button>
    </div>
    <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading6">
      <button class="btn" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">Heading6</button>
    </div>
    <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading7">
      <button class="btn" data-toggle="collapse" data-target="#collapse7" aria-expanded="false" aria-controls="collapse7">Heading7</button>
    </div>
    <div id="collapse7" class="collapse" aria-labelledby="heading7" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading8">
      <button class="btn" data-toggle="collapse" data-target="#collapse8" aria-expanded="false" aria-controls="collapse8">Heading8</button>
    </div>
    <div id="collapse8" class="collapse" aria-labelledby="heading8" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading9">
      <button class="btn" data-toggle="collapse" data-target="#collapse9" aria-expanded="false" aria-controls="collapse9">Heading9</button>
    </div>
    <div id="collapse9" class="collapse" aria-labelledby="heading9" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading10">
      <button class="btn" data-toggle="collapse" data-target="#collapse10" aria-expanded="false" aria-controls="collapse10">Heading10</button>
    </div>
    <div id="collapse10" class="collapse" aria-labelledby="heading10" data-parent="#accordion">
      <div class="card-body">
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
      </div>
    </div>
  </div>
</div>

但是，如果您尝试扩展第二列中的一些较低项目，则顶部的一些项目会跳回到它之前的列(这在我的网站上更明显，里面有更多项目(，这使得用户很难正确选择内容。

它之所以在两列中，而不仅仅是分成两个内联div，是因为它是由 PHP 生成的，并且其中的手风琴和项目的数量会发生变化。

有

没有办法阻止这些在展开时跨列跳跃？

尝试使用正确的引导函数。例如class="row"和列类(我使用了"col-sm-6"(...喜欢这个

#accordion {
  column-count: 2;
}
.card {
  margin: 0px 20px 20px 20px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
a{
  display:block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion" class="row">
  <div class="col-sm-6">
  
    <div class="card">
      <div class="card-header" id="heading1">
        <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
      </div>
      <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading2">
        <button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse1">Heading2</button>
      </div>
      <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading3">
        <button class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse1">Heading3</button>
      </div>
      <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading4">
        <button class="btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse1">Heading4</button>
      </div>
      <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading5">
        <button class="btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse1">Heading5</button>
      </div>
      <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading6">
        <button class="btn" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse1">Heading6</button>
      </div>
      <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-header" id="heading7">
        <button class="btn" data-toggle="collapse" data-target="#collapse7" aria-expanded="false" aria-controls="collapse1">Heading7</button>
      </div>
      <div id="collapse7" class="collapse" aria-labelledby="heading7" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading8">
        <button class="btn" data-toggle="collapse" data-target="#collapse8" aria-expanded="false" aria-controls="collapse8">Heading8</button>
      </div>
      <div id="collapse8" class="collapse" aria-labelledby="heading8" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading9">
        <button class="btn" data-toggle="collapse" data-target="#collapse9" aria-expanded="false" aria-controls="collapse9">Heading9</button>
      </div>
      <div id="collapse9" class="collapse" aria-labelledby="heading9" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading10">
        <button class="btn" data-toggle="collapse" data-target="#collapse10" aria-expanded="false" aria-controls="collapse10">Heading10</button>
      </div>
      <div id="collapse10" class="collapse" aria-labelledby="heading10" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading11">
        <button class="btn" data-toggle="collapse" data-target="#collapse11" aria-expanded="false" aria-controls="collapse11">Heading11</button>
      </div>
      <div id="collapse11" class="collapse" aria-labelledby="heading11" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="heading12">
        <button class="btn" data-toggle="collapse" data-target="#collapse12" aria-expanded="false" aria-controls="collapse12">Heading12</button>
      </div>
      <div id="collapse12" class="collapse" aria-labelledby="heading12" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
  </div>
</div>

尝试这样做，首先添加两个div ro onedive and class="row"，然后将col-md-6添加到所有卡片中，如下所示。

<div class="row">
   <div class col-md-6>
      <div class="card ">
        <div class="card-header" id="heading1">
             <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
        </div>
      <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
        <div class="card-body">
         <a href="#">item1</a>
         <a href="#">item2</a>
         <a href="#">item3</a>
         <a href="#">item4</a>
        </div>
      </div>
   </div>
   <div class col-md-6>
     <div class="card">
       <div class="card-header" id="heading2">
           <button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
       </div>
       <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
          <div class="card-body">
              <a href="#">item1</a>
              <a href="#">item2</a>
              <a href="#">item3</a>
              <a href="#">item4</a>
          </div>
        </div>
      </div>
    </div>
</div>

每两个按钮重复此代码。

所以我通过更改它在 PHP 中的生成方式来解决这个问题，而不是按照将它们分别添加到新行的答案之一中的建议进行操作，我这样做了：

$i =0;
$sql = "SELECT * FROM headings";
$stmt = DB::run($sql);
$count = $stmt->rowCount();
$half_count = ceil($count/2);
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $i++;
    if($i==1 || $i==$half_count+1){
        $headings .= '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-5 mb-5">';
        $headings .= '<div id="accordion" class="index_accordion">';
    }
    // the rest of my original code
    if($i==$half_count || $i==$count){
        $headings .= '</div>';
        $headings .= '</div>';
    }
}

现在

的问题是，它现在作为两个单独的手风琴工作，你可以在两侧扩展项目。

相关内容

最新更新

热门标签：