时间戳

首页 > 解决方案 > 使用 Bootstrap 4 设计发票表单

html - 使用 Bootstrap 4 设计发票表单

问题描述

在我的 VueJS 应用程序中，我正在使用 Bootstrap 4 构建发票表单，我正在使用这个代码片段，到目前为止一切都很好，但问题是，当涉及到 UI 样式时，我现在有点糟糕 :)

这里的问题是底部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>

标签： htmlcssbootstrap-4

解决方案

您可以使用offset来响应地偏移列。由于#tab_logic_totaltable 的容器占用了 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 产生任何影响。

进一步阅读：

推荐阅读