Стилизация формы счета с помощью Bootstrap 4

Question

В моем приложении VueJS я создаю форму счета-фактуры с использованием Bootstrap 4, я использую этот фрагмент кода , и до сих пор все было замечательно, но проблема в том, что когда дело доходит до стилизации пользовательского интерфейса Iотчасти отстой в данный момент :)

Проблема здесь в том, что нижняя часть totals плавает влево, а не вправо.Этот фрагмент кода был взят из примеров фрагмента кода Bootstrap 3, и я использую Bootstrap 4, так что, вероятно, это проблема.Однако я попытался преобразовать его в Bootstrap 4 с помощью онлайн-конвертеров, но ни один из них мне не помог.Буду признателен за вашу помощь.

Это код, который я хочу всплывать вправо.

<div class="row clearfix" style="margin-top:20px">
  <div class="float-right col-lg-4">
    <table class="table table-bordered table-hover" id="tab_logic_total">
      <tbody>
        <tr>
          <th class="text-center">Sub Total</th>
          <td class="text-center">
            <input type="number" name="sub_total" placeholder="0.00" class="form-control" id="sub_total" readonly>
          </td>
        </tr>
        <tr>
          <th class="text-center">Tax</th>
          <td class="text-center">
            <div class="input-group mb-2 mb-sm-0">
              <input type="number" class="form-control" id="tax" placeholder="0">
              <div class="input-group-addon">%</div>
            </div>
          </td>
        </tr>
        <tr>
          <th class="text-center">Tax Amount</th>
          <td class="text-center">
            <input type="number" name="tax_amount" id="tax_amount" placeholder="0.00" class="form-control" readonly>
          </td>
        </tr>
        <tr>
          <th class="text-center">Grand Total</th>
          <td class="text-center">
            <input type="number" name="total_amount" id="total_amount" placeholder="0.00" class="form-control" readonly>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

Вы можете использовать смещение для быстрого смещения столбцов. Поскольку контейнер таблицы #tab_logic_total занимает 4 столбца, у нас осталось 8 столбцов, поэтому:

<div class="row clearfix" style="margin-top:20px">
  <!-- Notice this line: We are offsetting the table by 8 columns -->
  <div class="col-lg-4 offset-lg-8">
    <table class="table table-bordered table-hover" id="tab_logic_total">
      <tbody>
        <tr>
          <th class="text-center">Sub Total</th>
          <td class="text-center">

На данный момент нам больше не нужен класс float-right. В любом случае это не повлияет на flexbox.

Дополнительные показания:

• Сетка Bootstrap