如何减少手风琴组件的宽度？

Question

我正在尝试将折叠组件添加到我的页面中。但折叠组件的宽度太长。事实上，如果我把它向右移动一点，我甚至看不到右边的边框。

如何更改手风琴边框的宽度？我使用的是here提供的精确代码。它看起来像这样：

​

Answer 1

有两种方法。

1. 将折叠面板放入设置了宽度的容器元素中
2. 将css类添加到设置了宽度的clr-accordion中

下面是一些代码示例：

  <section class="accordion-width">
    <h3>Accordion in a container with width set</h3>
    <clr-accordion>
      ...
    </clr-accordion>
  </section>

  <h3>Accordion with width class directly on the element:</h3>
    <clr-accordion class="accordion-width">
      ...
    </clr-accordion>

使用类似如下的样式：

.accordion-width {
  width: 200px;
}

你可以在这里看到工作代码：https://stackblitz.com/edit/so-58505545-accordion-widths

Answer 2

您只能在css中使用calc函数设置宽度，将其设置为80%，并将其右对齐