折叠侧边栏导航时如何从左向右移动图标？

Question

当你点击切换按钮（条形图）时，我的侧边栏宽度为50px，我在过去一小时左右试图弄清楚的是侧边栏的宽度是50px，如何只有当它的宽度为50px时，我才会将图标向右移动，以便它们显示在50px区域中吗？

现在它看起来像这样

我想要的是

$(document).ready(function() {
});
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("active");
  
  $('#abc').addClass("d-flex flex-row-reverse");
  
  //alert(1);
});

$('#anch1').on('click', function() {
  $('#pnl').hide();
});
$('#anch2').on('click', function() {
  $('#pnl').show();
});
$('#closeIt').on('click', function() {
  alert("Close");
});

#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;
}

#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 {
    /*border:1px solid red;*/
    height: 35px;
    display: block;
    font-size: 20px;
  }

<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>

Answer 1

使用Bootstrap 4的解决方案是：

当侧边栏折叠时，将以下类添加到标签：

d-flex flex-row-reverse

那就是它！

另外，对于整洁的间距，我建议将这些填充类添加到图标中：

px-3 pt-1（填充水平3个单位和填充顶部1个单位）

您的标签代码如下所示：

<label class="d-flex flex-row-reverse" style="display:block"><i class="fa fa-users px-3 pt-1"></i> Administration</label>