Question

我使用了bootstrap 4如何在同一行中进行折叠？

这是我的HTML

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div id="accordion2" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne2">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseOne2" data-parent="#accordion2" href="#" aria-expanded="true" aria-controls="collapseOne2">
              Collapsible Group Item #1
            </a>
      </h4>
    </div>
    <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne2">
      body 1
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo2">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-target="#collapseTwo2" data-parent="#accordion2" href="#" aria-expanded="false" aria-controls="collapseTwo2">
              Collapsible Group Item #2
            </a>
      </h4>
    </div>
    <div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
      body 2
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree2">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-target="#collapseThree2" data-parent="#accordion2" href="#" aria-expanded="false" aria-controls="collapseThree2">
              Collapsible Group Item #3
            </a>
      </h4>
    </div>
    <div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
      body 3
    </div>
  </div>

</div>

＆＃13;

我想现在显示

可折叠小组项目＃1

可折叠群组项目＃2

可折叠小组项目＃3

我如何将它们组合起来

可折叠组项目＃1可折叠组项目＃2可折叠组项目＃3

Answer 1

只需添加以下css

即可

.panel-default{
  display : flex;

}

这里的工作片段。

   /* .panel-default{
display : flex;
} */
#accordion2{ display: flex}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div id="accordion2" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne2">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseOne2" data-parent="#accordion2" href="#" aria-expanded="true" aria-controls="collapseOne2">
              Collapsible Group Item #1
            </a>
      </h4>
    </div>
    <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne2">
      body 1
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo2">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-target="#collapseTwo2" data-parent="#accordion2" href="#" aria-expanded="false" aria-controls="collapseTwo2">
              Collapsible Group Item #2
            </a>
      </h4>
    </div>
    <div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
      body 2
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree2">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-target="#collapseThree2" data-parent="#accordion2" href="#" aria-expanded="false" aria-controls="collapseThree2">
              Collapsible Group Item #3
            </a>
      </h4>
    </div>
    <div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
      body 3
    </div>
  </div>

</div>

如何在同一行中进行折叠

1 个答案: