我创建了一个列表组，显示文本变体名称及其价格，然后单击e组按钮进行编辑。我想要的是价格和按钮应该是正确的，但是在我目前的工作中，似乎有些混乱。这是我的单项清单。完整的代码段在这里https://jsfiddle.net/matiusnugroho/uev7wz5t/4/
<li class="list-group-item px-0" style="padding: 0px;">
<span>
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a>
<span class="float-right">341000</span>
<span class="float-right">
<div class="btn btn-group">
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</span>
</span>
<div
class="collapse" id="collapseExample11" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>Variant 03</td>
</tr>
<tr>
<td>Description</td>
<td>just it</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
如何正确设置价格和按钮组？
答案 0 :(得分：0)
尝试删除浮动类以使其右侧对齐。当我们使用float-right时会影响其他div对齐方式。
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.list-group .card {
border: 0;
border-top: 1px solid #ddd;
border-radius: 0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<div class="card-header"><strong class="card-title">Variants</strong></div>
<div class="card-body">
<div class="col-12">
<ul class="list-group">
<li class="list-group-item p-0 collapsed">
<div class="d-flex">
<a class="btn btn-link" data-toggle="collapse" href="#collapseExample10" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 02</a>
<div class="ml-auto my-1 mr-1">
<span class="price">12000</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample10" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>V02</td>
</tr>
<tr>
<td>Description</td>
<td>A description</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
<li class="list-group-item p-0">
<div class="d-flex">
<a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a>
<div class="ml-auto my-1 mr-1">
<span class="price">341000</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample11" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>Variant 03</td>
</tr>
<tr>
<td>Description</td>
<td>just it</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
<li class="list-group-item p-0">
<div class="d-flex">
<a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample12" role="button" aria-expanded="false" aria-controls="collapseExample1">Yet Another Varian</a>
<div class="ml-auto my-1 mr-1">
<span class="price">121212</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample12">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>v34</td>
</tr>
<tr>
<td>Description</td>
<td>afrvrefr rre</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 mt-2 text-right">
<button type="button" class="btn btn-default">Add Varian</button>
</div>
</div>
</div>