将引导手风琴上的加减号图标移动到最右边答案

【问题标题】：Move plus-minus icon on bootstrap accordion to extreme right将引导手风琴上的加减号图标移动到最右边
【发布时间】：2020-04-27 19:28:41
【问题描述】：

我正在尝试将引导手风琴上的加减号图标移动到最右边的位置，但我的代码似乎不起作用。

这是过去的 CSS：

.mb-0 > a:before {
        float: right !important;
        font-family: FontAwesome;
        content:"\f068";
        padding-right: 5px;
    }
    .mb-0 > a.collapsed:before {
        float: right !important;
        content:"\f067";
    }
    .mb-0 > a:hover, 
    .mb-0 > a:active, 
    .mb-0 > a:focus  {
        text-decoration:none;
    }

这是 HTML 部分：

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
        <div class="card">
            <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    1. Human Growth and development
                </a>
            </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
            </div>
            </div>
        </div>

我想要类似于此处显示的示例：JSfiddle

【问题讨论】：

仅供参考，您的小提琴对我没有任何用处，因为我的浏览器阻止了您嵌入到通过 HTTPS 提供的页面中的所有不安全资源。
嗨@nick，您似乎已经发布了 11 个问题。除了一个以外，所有的答案都已得到回答，但您从未接受过答案。如果答案解决了您的问题，您应该使用答案旁边的复选标记将其标记为正确。见What should I do when someone answers my question?

标签： html css twitter-bootstrap-3

【解决方案1】：

将padding-right:5px 更改为panel-heading

.panel-heading{
  padding-right:3px;
}

http://jsfiddle.net/lalji1051/c1f9zr4v/1/

【讨论】：

【解决方案2】：

如果您使用::after 而不是::before 将图标放置在文本节点之后，您可以使用display: flex 和justify-content: space-between 的组合来放置图标： p>

.mb-0>a:after {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
}

.mb-0>a.collapsed:after {
  float: right !important;
  content: "\f067";
}

.mb-0>a:hover,
.mb-0>a:active,
.mb-0>a:focus {
  text-decoration: none;
}

.mb-0>a {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          1. Human Growth and development
        </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
      </div>
    </div>
  </div>

如果你想继续使用:before，你可以使用order将图标定位在文本节点之后：

.mb-0>a:before {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
  
  order: 2;
}

.mb-0>a.collapsed:before {
  float: right !important;
  content: "\f067";
}

.mb-0>a:hover,
.mb-0>a:active,
.mb-0>a:focus {
  text-decoration: none;
}

.mb-0>a {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          1. Human Growth and development
        </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
      </div>
    </div>
  </div>

【讨论】：

【解决方案3】：

使用 display flex，我设置了两个元素的位置。我添加了仅在按下加号按钮时折叠所需的类。这似乎解决了你的问题。

 Css: 

  #collapse-btn {
     display: flex;
     justify-content: space-between;
     align-items: center;
  }

 Html: 

  <h2 class="mb-0">
     <a class="btn btn-link collapsed" id="collapse-btn">
        1. Human Growth and development
        <i class="fas fa-plus" data-toggle="collapse" data-target="#collapseOne"></i>
     </a>
  </h2>

【讨论】：