Bootstrap 4 Right justifiy Группа кнопок внутри группы списков

Question

Я создал группу списков, которая отображает имя варианта текста и его цену, а затем кнопку группы 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>

как правильно расставить цену и группу кнопок?

Answer 1

Попробуйте удалить плавающий класс, чтобы выровнять правую сторону.Когда мы используем float-right, это повлияет на выравнивание другого div.

Для spacing и button используйте компоненты начальной загрузки по умолчанию.

.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>