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

Question

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

这是过去的 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

Answer 1

在panel-heading上更改padding-right:5px

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

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

Answer 2

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

 .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 position 文本节点后面的图标：

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

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