Переместите значок плюс-минус на bootstrap аккордеоне в крайнее правое положение - PullRequest
Новая
       12

Переместите значок плюс-минус на bootstrap аккордеоне в крайнее правое положение

0 голосов
/ 27 апреля 2020

Я пытаюсь переместить значок плюс-минус на bootstrap аккордеоне в крайнее правое положение, но мой код, похоже, не работает.

Вот 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

Ответы [ 3 ]

1 голос
/ 27 апреля 2020

Если вы используете ::after вместо ::before для размещения значка после текстового узла, вы можете использовать комбинацию display: flex и justify-content: space-between для позиционирования значка: 

.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>
1 голос
/ 27 апреля 2020

Используя 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>
1 голос
/ 27 апреля 2020

Изменение padding-right:5px вкл. panel-heading

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

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

...