Bootstrap 3 - 表单输入元素对齐修复

Question

我正在尝试制作表格并且已经完成了这个-

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Disposed In Landfill - Tons</span>
        <input required type="text" name="disposed_in_landfill_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Sold Tons</span>
        <input required type="text" name="sold_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Sold - Net Cash</span>
        <input required type="text" name="sold_net_cash" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Recycled - Tons</span>
        <input required type="text" name="recycled_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Recycled - Net Cash</span>
        <input required type="text" name="recycled_net_cash" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Reused - Tons</span>
        <input required type="text" name="reused_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Reuse - Saved</span>
        <input required type="text" name="reuse_saved" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Donation - Tons</span>
        <input required type="text" name="donation_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Donation - Value</span>
        <input required type="text" name="donation_value" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Total Cost to Dispose</span>
        <input required type="text" name="total_cost_to_dipose" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Actual Cost Dispose</span>
        <input required type="text" name="actual_cost" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Disposal Avoidance Saving</span>
        <input required type="text" name="disposal_avoidance_savings" class="form-control">
    </div>
</div>

并找到这样的输出-

所以，问题是我想让左边的所有框都对齐。

（红色线条中的全部一样）

有谁能帮帮我吗？

Edit

我试过了-

width:300px;
text-align: right;

但没有修复

Answer 1

如果您希望它们具有固定宽度，请将 min-width 设置为 input-group-addon。这将使它们均匀对齐。

width 对您不起作用，因为它已被来自 Bootstrap 代码的 width: 1% 覆盖。如果您用适当的 CSS 优先级顺序覆盖它，它也会起作用。

.input-group-addon {
  min-width: 250px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Disposed In Landfill - Tons</span>
    <input required type="text" name="disposed_in_landfill_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Sold Tons</span>
    <input required type="text" name="sold_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Sold - Net Cash</span>
    <input required type="text" name="sold_net_cash" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Recycled - Tons</span>
    <input required type="text" name="recycled_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Recycled - Net Cash</span>
    <input required type="text" name="recycled_net_cash" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Reused - Tons</span>
    <input required type="text" name="reused_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Reuse - Saved</span>
    <input required type="text" name="reuse_saved" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Donation - Tons</span>
    <input required type="text" name="donation_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Donation - Value</span>
    <input required type="text" name="donation_value" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Total Cost to Dispose</span>
    <input required type="text" name="total_cost_to_dipose" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Actual Cost Dispose</span>
    <input required type="text" name="actual_cost" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Disposal Avoidance Saving</span>
    <input required type="text" name="disposal_avoidance_savings" class="form-control">
  </div>
</div>

Bootstrap 3 - 表单输入元素对齐修复

Bootstrap 3 - Form Input Element Alignment Fixing

twitter-bootstrap

angular-ui-bootstrap

bootstrap-modal

twitter-bootstrap-3