Bootstrap - List Group Item中的按钮

Question

我想创建一个Web GUI,它分为两部分:一组不同的操作,实现为Bootstrap List Group和一个可以更改这些操作设置的详细区域.

单击该项应显示该操作的详细信息/设置部分.

我还想要快速操作,这是List Group项目右侧的小按钮.

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

Answer 2

我认为这接近使用 flex 的标准引导程序 4 列表组

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <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"><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"><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>