如何左对齐默认引导程序 5 手风琴图标答案

【问题标题】：How to left align default bootstrap 5 accordion icon如何左对齐默认引导程序 5 手风琴图标
【发布时间】：2022-02-02 00:35:37
【问题描述】：

我想得到这样的东西：

这是当前的结果：

我尝试过的：

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    float: left;
}

很遗憾，float: left; 没用。

有什么想法吗？

这是LIVE JSFIDDLE

更新：

如果我按照佐藤健的建议去掉margin-left: auto，图标会更靠近文本，但仍会向右对齐。

【问题讨论】：

删除margin-left: auto。
感谢您的评论佐藤さん、是的，我之前也尝试过，它的作用是将图标移近文本，但仍会向右对齐。
用@SatoTakeru 评论更新问题

标签： css twitter-bootstrap

【解决方案1】：

您可以使用 flex order 属性

.accordion-button:after {
    order: -1; //swap order
    margin-left: 0; 
    margin-right:0.5em; // just extra space between text and icon
}

【讨论】：

完美，我之前不知道order: -1。谢谢@herrstrietzel。
实际上将其更改为a:before 伪元素将是@MeltingDog 推荐的更合适的方法。更改顺序宁愿是一种“快速而肮脏”的解决方案，以保留现有的 css。

【解决方案2】：

您可以编写一个自定义类来将伪代码更改为::before 并删除margin-left。

注意：
你必须隐藏::after 伪元素。

例如：

.myaccordion .accordion-button::before {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.accordion-button::after {display: none !important;}

【讨论】：

如果是这样，有两个箭头。 ::before 和 ::after.
是的，您必须修改引导 css（不建议）或隐藏之后。
是的，所以你应该在你的答案中写出来。

【解决方案3】：

在引导程序中没有对此的默认支持。我已经通过 .accordion .right 中的自定义类解决了它以对齐它。 (working example)

最终结果：

我在 scss 中的代码使用自定义图标来打开和关闭：

.accordion {
  &.right {
    .accordion-button:not(.collapsed)::before {
      background-image: url("../images/x.svg");
      transform: rotate(-180deg);
    }

    .accordion-button::before {
      height: 1.5rem;
      background-image: url('../images/plus.svg');

      flex-shrink: 0;
      width: $accordion-icon-width;
      margin-left: 0;
      margin-right: $accordion-icon-width;
      content: "";
      background-repeat: no-repeat;
      background-size: $accordion-icon-width;
      @include transition($accordion-icon-transition);
    }
    .accordion-button::after {
      display: none;
    }

    .accordion-collapse {
      margin-left: 2*$accordion-icon-width;
    }
  }
}

我在 css 中的编译代码使用自定义图标来打开和关闭：

.accordion.right .accordion-button:not(.collapsed):before {
    background-image: url(/build/images/x.svg);
    transform: rotate(-180deg);
}
.accordion.right .accordion-button:before {
    background-image: url(/build/images/plus.svg);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    content: "";
    flex-shrink: 0;
    height: 1.5rem;
    margin-left: 0;
    margin-right: 1.25rem;
    transition: transform 0.2s ease-in-out;
    width: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
    .accordion.right .accordion-button:before {
        transition: none;
    }
}
.accordion.right .accordion-button:after {
    display: none;
}
.accordion.right .accordion-collapse {
    margin-left: 2.5rem;
}

【讨论】：