css - Bootstrap - 列表组项中的按钮

Question

我想创建一个 Web GUI，它分为两部分:不同操作的列表，实现为 Bootstrap 列表组和可以更改这些操作设置的详细信息区域。

单击该元素应显示该操作的详细信息/设置部分。

我还想要快速操作，即列表组元素右侧的小按钮。

这个概念在 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？

Answer 1

@Kim:如果您仍想在有效的 HTML 标准中使用 Bootstrap 实现相同的效果，请使用以下代码。我将按钮更改为 span 并添加了相同的类 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>