引導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> 

並找到像這個 -

所以一個輸出，問題是我想讓左側的所有方塊都相同。

（像所有在紅色的線）

可以anyoun幫助我嗎？

編輯

我曾嘗試 -

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>