Bootstrap 4-水平对齐的手风琴

Question

我一直在寻找一种在Bootstrap 4中构建手风琴的方法，该方法将每个面板从左到右而不是从上到下排列。此外，我正在尝试找到一种解决方案，将可点击的标题旋转90度，并向内容的左侧旋转。

我从前看过这篇文章：

Twitter Bootstrap折叠插件方向-水平而非垂直

但是，所有解决方案似乎都不起作用，或者对于手风琴而言。理想情况下，手风琴将装满width容器并保持该容器width。我模拟了两种状态下的外观：

状态一

状态二

Answer 1

可以通过一些调整来实现这一点，但在实施之前请仔细阅读要求：

考虑到您使用的是Bootstrap 4，并且支持的最低 Internet Explorer 版本是 IE10 ，因此使用CSS 转换应该不会出现问题。但需要注意的是，在这个黑客解决方案中，我使用的是指针事件，因此，如果您想避免单击已打开的元素而关闭它，则至少需要 Internet Explorer 11。

对于此解决方案，开头必须有一个唯一的打开元素（此打开元素用于获取其宽度并将其应用于所有可折叠内容）。此外，手风琴的高度在开始时更新，因此，由于固定的宽度和高度应用于元素，如果您想要响应能力，您应该在每个视口调整大小时更新这些尺寸。另外，请考虑到我在示例中没有使用任何 CSS 供应商前缀。

代码笔：

https://codepen.io/elchininet/pen/wLMxpB

片段：

var horizontalAccordions = $(".accordion.width");

horizontalAccordions.each(function() {
  var accordion = $(this);
  var collapse = accordion.find(".collapse");
  var bodies = collapse.find("> *");
  accordion.height(accordion.height());  
  bodies.width(bodies.eq(0).width());
  collapse.not(".show").each(function() {
    $(this).parent().find("[data-toggle='collapse']").addClass("collapsed");
  });
});

.accordion.width {
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.accordion.width .card {
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 1;
  min-width: min-content;
}

.accordion.width .card .card-header {
  cursor: pointer;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.accordion.width .card .card-header:not(.collapsed) {
  pointer-events: none;
}

.collapsing.width {
  transition: width 0.35s ease;
  height: auto;
  width: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="accordion width" id="accordionHorizontalExample">
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseOne">
      Collapsible Group Item 1
    </div>
    <div id="collapseOne" class="collapse show width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseTwo">
      Collapsible Group Item 2
    </div>
    <div id="collapseTwo" class="collapse width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseThree">
      Collapsible Group Item 3
    </div>
    <div id="collapseThree" class="collapse width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>