Bootstrap 4 - 水平对齐手风琴

Question

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

我很久以前就看过这个帖子：

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

但似乎没有任何解决方案有效，或者对于手风琴。理想情况下，手风琴将填充容器的width 并保持width。我模拟了它在两种状态下的样子：

State One

State Two

Answer 1

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

考虑到您使用的是Bootstrap 4，以及受支持的最低Internet Explorer 版本is IE10，使用CSS transforms 应该没有问题。但重要的是要注意，在这个 hacky 解决方案中，我使用的是pointer-events，因此，如果您想避免关闭单击它的已打开元素，则至少需要 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>