css - 如何减少 Clarity Accordion 组件的宽度？

Question

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

如何更改 Accordion 边框的宽度？我正在使用提供的确切代码 here .它看起来像这样:

Answer 1

有两种方法。

1. 将 Accordion 放在一个设置了宽度的容器元素中
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