Бутстрап - кнопки внутри элемента списка групп

Я хочу создать веб-графический интерфейс, который разделен на 2 части: список различных действий, реализованных как группа списка начальной загрузки, и область подробностей, в которой параметры этих действий могут быть изменены.

Нажав на элемент, вы должны отобразить раздел подробностей/настроек для этого действия.

Мне также нужны быстрые действия, которые являются маленькими кнопками в правой части элементов списка.

Эта концепция работает в Bootstrap, но я IDE дает мне предупреждения о вложенных кнопках/ссылках. Большая проблема заключается в том, что это недействительно HTML5 и может привести к неправильным результатам. Ошибка, которую я уже заметил, заключается в том, что нажатие маленькой кнопки также выполняет действие элемента списка в Firefox.

Вот пример концепции GUI, так как это сложно описать словами: https://jsfiddle.net/drx7xhw7/

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h3>Actions</h3>
      <div class="list-group">
        <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');">
          Action1
          <span class="pull-right">
            <button type="button" class="btn btn-xs btn-default" onclick="alert('Action1 -> Play');">
              <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
            </button>
          </span>
        </a>
        <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');">
          Action2
          <span class="pull-right">
            <button type="button" class="btn btn-xs btn-default" onclick="alert('Action2 -> Play');">
              <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
            </button>
          </span>
        </a>
      </div>
    </div>

    <div class="col-md-8">
      <h3>Settings</h3>
    </div>
  </div>
</div>

Есть ли простой способ иметь точно такой же GUI, но с использованием допустимого HTML5?

Ответ 1

@Kim: Если вы все еще хотите добиться того же результата с помощью Bootstrap в действительном стандарте HTML, используйте следующий код. Я изменил кнопку на диапазон и добавил тот же класс btn btn-xs btn-default.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3>Actions</h3>
            <div class="list-group">
                <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');">
                    Action1
                    <span class="pull-right">
                        <span class="btn btn-xs btn-default" onclick="alert('Action1 -> Play'); event.stopPropagation();">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </span>
                    </span>
                </a>
                <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');">
                    Action2
                    <span class="pull-right">
                        <span class="btn btn-xs btn-default" onclick="alert('Action2 -> Play'); event.stopPropagation();">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </span>
                    </span>
                </a>
            </div>
        </div>

        <div class="col-md-8">
            <h3>Settings</h3>
        </div>
    </div>
</div>

Ответ 2

Я думаю, что это близко к стандартной группе списков начальной загрузки 4 с использованием flex

<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'; return false;">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<ul class="list-group cProductsList"> 
                <li class="list-group-item d-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">First item</p> 
                   <button class="btn-success">EDIT</button>  <button class="btn-danger">DELETE</button>
                </li>
               <li class="list-group-item d-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">Second item</p>  
                   <button class="btn-success">EDIT</button>  <button class="btn-danger">DELETE</button>
                </li> 
</ul>