我来帮你搞定这个侧边栏图标对齐的问题！你想要的效果是当侧边栏收缩到50px宽度时，让图标靠右显示在窄侧边栏内对吧？咱们来一步步调整你的代码：

问题分析 #

当前你的JS代码在点击按钮时直接给#abc添加了d-flex flex-row-reverse类，但这个类不会在侧边栏展开时自动移除，而且这种和侧边栏状态绑定的样式，用CSS来控制会更简洁、更符合状态联动的逻辑，不需要手动用JS去操作类名。另外，之前的代码里侧边栏收缩时只调整了left属性，宽度还是250px，这也是导致图标显示异常的原因之一。

解决方案 #

我们需要做三个关键调整：

1. 修复侧边栏收缩时的宽度设置
2. 移除JS中手动添加类的代码，让侧边栏的active状态驱动样式变化
3. 添加CSS规则，针对侧边栏收缩状态调整图标和文字的显示

修改后的完整代码：

HTML部分（保持原有结构不变）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row">
  <div style="width:100%; height:50px; border:1px solid black; background-color:#191970;">
    <a id="menu-toggle" href="#" class="btn-menu toggle" style="font-size:25px; margin-left:20px; margin-top:8px; color:orange;">
      <i class="fa fa-bars"></i>
    </a>
    <div class="pull-right">
      <a class="btn btn-danger" href="#" style="margin-right:10px; margin-top:7px;" id="closeIt">
        <i class="fa fa-close fa-lg"></i> Close
      </a>
    </div>
  </div>
</div>
<div id="wrapper">
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <nav id="spy">
      <div class="sidebar-nav nav">
        <div class="panel panel-default" style="border:0;">
          <div class="panel-heading" style="background: black; border:none; color:white;">
            <h4 class="panel-title" style="background-color:black;">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Settings</a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body" style="background-color:gray; width:250px;">
              <p>
                <label id="abc" style="display:block"><i class="fa fa-users"></i> Administration</label>
              </p>
              <p>
                <label style="display:block"><i class="fa fa-users"></i> Manufacturers</label>
              </p>
              <p>
                <label style="display:block"><i class="fa fa-users"></i> Implementors</label>
              </p>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <!-- Page content -->
  <div id="page-content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-danger">
              <div class="panel-heading"> Panel 1 </div>
              <div class="panel-body"> content body </div>
            </div>
          </div>
          <div class="col-md-6" id="pnl">
            <div class="panel panel-success">
              <div class="panel-heading"> Panel 1 </div>
              <div class="panel-body"> content body </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS部分（新增状态联动样式+修复宽度）

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
  margin-left: -250px;
  margin-top: 0px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}
#wrapper.active {
  padding-left: 50px;
}
#wrapper.active #sidebar-wrapper {
  left: 50px;
  width: 50px; /* 明确设置收缩后的宽度，之前遗漏了这一步 */
}
#page-content-wrapper {
  width: 100%;
  padding-top: 10px;
  transition: all 0.4s ease 0s;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu-toggle {
  text-decoration: none;
  float: left;
  color: #fff;
  padding-right: 15px;
}
@media (max-width:767px) {
  #wrapper {
    padding-left: 0;
  }
  #sidebar-wrapper {
    left: 0;
  }
  #wrapper.active {
    position: relative;
    left: 250px;
  }
  #wrapper.active #sidebar-wrapper {
    left: 250px;
    width: 250px;
    transition: all 0.4s ease 0s;
  }
  #menu-toggle {
    display: inline-block;
  }
}
.bs-example {
  margin: 10px;
}
.bs-example #accordion {
  width: 250px;
}
.myBG {
  background-color: black;
}
label {
  height: 35px;
  display: block;
  font-size: 20px;
  display: flex;
  align-items: center;
}

/* --- 新增的状态联动样式 --- */
#wrapper.active #sidebar-wrapper .sidebar-nav label {
  justify-content: flex-end; /* 收缩时内容靠右对齐 */
  padding-right: 10px; /* 给图标留右侧间距，避免贴边 */
  overflow: hidden; /* 隐藏超出50px的文字 */
}
#wrapper.active #sidebar-wrapper .sidebar-nav label i {
  font-size: 18px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#wrapper.active #sidebar-wrapper .sidebar-nav label span,
#wrapper.active #sidebar-wrapper .sidebar-nav label:not(:only-child)::after {
  display: none; /* 收缩时隐藏文字内容 */
}

JS部分（移除冗余代码，保留核心状态切换）

$(document).ready(function() { });
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("active");
  // 移除手动添加类的代码，交给CSS处理状态样式
});
$('#anch1').on('click', function() {
  $('#pnl').hide();
});
$('#anch2').on('click', function() {
  $('#pnl').show();
});
$('#closeIt').on('click', function() {
  alert("Close");
});

关键修改点说明 #

1. 修复侧边栏宽度：新增#wrapper.active #sidebar-wrapper { width: 50px; }，确保收缩时侧边栏真正变成50px宽度。
2. 状态联动样式：通过父级#wrapper.active选择器，仅在侧边栏收缩时应用图标靠右、文字隐藏的样式，展开时自动恢复原有布局。
3. 简化JS逻辑：去掉手动添加d-flex flex-row-reverse的冗余代码，让CSS负责状态关联的样式控制，代码更易维护。

这样调整后，点击汉堡按钮收缩侧边栏时，图标会自动靠右对齐，刚好在50px的侧边栏内显示；展开时又会恢复原来的文字+图标布局，完美满足你的需求！

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