技术求助：如何将带加减号的折叠面板图标右移？

嘿，这问题不难解决！要让折叠面板里的加减图标靠右对齐，咱们可以从CSS布局和jQuery插入位置两个方面调整，给你两种简单的方案：

方案一：调整图标插入位置 + Flex布局（推荐） #

这个方案更直观，先把图标放到链接的末尾，再用Flex布局让文字和图标分别居左、居右：

1. 首先添加CSS样式：

#accordion .panel-title a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none; /* 可选，去掉链接下划线 */
}

2. 修改你的jQuery代码，把prepend改成append（把图标加到文字后面）：

jQuery(function($) {
  var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
  // 把prepend改成append
  $active.find('a').append('<i class="glyphicon glyphicon-minus"></i>');
  $('#accordion .panel-heading').not($active).find('a').append('<i class="glyphicon glyphicon-plus"></i>');
  
  $('#accordion').on('show.bs.collapse', function (e) {
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
  })
});

这样设置后，链接里的标题文字会自动靠左，图标则靠右对齐，而且Flex布局能保证它们垂直居中，视觉效果更舒服。

方案二：仅用CSS调整（不修改jQuery） #

如果你不想改动jQuery的插入逻辑，也可以用CSS的order属性调整图标位置，再配合Flex布局：

#accordion .panel-title a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
/* 把图标放到右侧 */
#accordion .panel-title a .glyphicon {
  order: 2;
}
/* 确保文字在左侧占满剩余空间 */
#accordion .panel-title a {
  gap: 1rem; /* 可选，给文字和图标加些间距 */
}

这个方法不需要改jQuery代码，直接通过CSS重新排序元素，同样能实现图标靠右的效果。

为什么这样有效？ #

Bootstrap的折叠面板默认是块级元素，用Flex布局可以轻松控制内部元素的对齐方式，不管是调整插入位置还是用CSS排序，都能快速实现图标靠右的需求。

内容的提问来源于stack exchange，提问作者Promise Orung