Question

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

我从前一段时间见过这篇文章：

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

但是这些解决方案似乎都不起作用，也不适用于手风琴。理想情况下，手风琴将填充容器的 width 并保持该宽度。我嘲笑了两个州的样子： State One State Two

提前致谢！

Answer 1

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

考虑到您正在使用Bootstrap 4和受支持的最低Internet Explorer版本is IE10，使用CSS transforms应该不会有问题。但是请务必注意，在此 hacky 解决方案中，我正在使用pointer-events，因此，如果要避免关闭已打开的元素，请至少使用Internet Explorer 11。它。

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

Codepen：

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>

Bootstrap 4 - 水平对齐手风琴

1 个答案:

Codepen：

摘要：