Html Bootstrap - 列表组项目内的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38373842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Buttons inside List Group Item
提问by Kim-Yannick Jürs
I want to create a Web GUI, which is seperated into 2 parts: A list of different actions, implemented as a Bootstrap List Group and a detail area where settings of those actions can be changed.
我想创建一个 Web GUI，它分为 2 部分：不同操作的列表，实现为 Bootstrap 列表组和可以更改这些操作设置的详细信息区域。
Clicking on the item should display the detail/settings section for that action.
单击该项目应显示该操作的详细信息/设置部分。
I also want quick-actions, which are small buttons on the right side of the List Group items.
我还需要快速操作，即列表组项目右侧的小按钮。
This concept works in Bootstrap, but me IDE gives me warnings about the nested buttons/links. The big problem is, that this is not valid HTML5 and could lead to wrong results. An error I already noticed is, that clicking a small button also executes the list item action in Firefox.
这个概念适用于 Bootstrap，但我的 IDE 给了我关于嵌套按钮/链接的警告。最大的问题是，这不是有效的 HTML5，可能会导致错误的结果。我已经注意到的一个错误是，单击一个小按钮也会在 Firefox 中执行列表项操作。
Here is an example of the GUI concept, as this is hard to describe in words: https://jsfiddle.net/drx7xhw7/
这是 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>
Is there an easy way of having exactly the same GUI but using valid HTML5?
有没有一种简单的方法来拥有完全相同的 GUI 但使用有效的 HTML5？
回答by trungk18
@Kim: If you still want to achieve the same with Bootstrap in the valid HTML Standard, use the following code. I changed the button to span and added the same class btn btn-xs btn-default.
@Kim：如果您仍然想在有效的 HTML 标准中使用 Bootstrap 实现相同的效果，请使用以下代码。我将按钮更改为 span 并添加了相同的 class 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>回答by TikasMan
I think this is near to standard bootstrap 4 list group using flex
我认为这接近使用 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 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>