Boostrap 4: <a>в <button>

Question

У меня есть <a>, значок, который перенаправляет на страницу. Он находится внутри <button>, а <button> - кнопка свертывания. Этот значок <a> находится внутри кнопки, поэтому, когда я нажимаю на него, меню разворачивается, и ТОГДА ссылка в моем <a> работает.

У меня вопрос: есть ли способ «z-index» для <a>, поэтому, когда я нажимаю на него, меню не запускается при сохранении <a> внутри <button>. Если нет, что вы предлагаете?

Мой код: https://codepen.io/anon/pen/GaygNQ

Answer 1

В соответствии с W3C, элемент <button> должен содержать только фразовый контент , а не интерактивный контент .Я просто предлагаю вам поместить <a> вне элемента <button> и использовать гибкий макет.

Answer 2

Если вы используете загрузчик, то почему бы не использовать класс row, чтобы <a> не находился внутри <button>

   <div class="row">
      <div class="col-md-9">
         <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
             Collapsible Group Item #1
         </button>
      </div>
      <div class="col-md-3">
        <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
        </a>
      </div>
  </div>

Как то так. Надеюсь, что это поможет.

Answer 3

Пожалуйста, отметьте это https://jsfiddle.net/gyd1to9z/ поэтому a должно быть на своем элементе. Я немного отредактировал твой код из

 <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
          <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
        </button>
      </h2>
    </div>

до

<div class="card-header" id="headingOne">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
        <button class="btn btn-link text-right" >
          <a class="modificationUtilisateur" href="https://www.google.com/" id=""target="_blank">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
        </button>
    </div>

и в вашем css я удалил

.fa-pen {
  float: right;
  z-index: 100000;
}

и замените его на

#headingOne{
  display:flex;
}

надеюсь, что это то, что вы хотите.