引導列表組中的字體真棒圖標對齊問題

Question

我想創建一個使用引導程序和字體真棒圖標的自定義清單框框。以下是我做，輸出：

http://jsfiddle.net/9nuhnbbv/110/

<style> 
.bigmodal { 
    height: 90%; 
    left: 5%; 
    margin: 0; 
    width: 90%; 
} 

.bigmodal.fade.in { 
    top: 5%; 
} 

.bigmodal .modal-body { 
    max-height: none; 
} 

.bigmodal .modal-content { 
    width: 100%; 
} 

</style> 

<a data-toggle="modal" href="#HoastedModal" class="btn btn-info">Hoasted Modal</a> 
<br> 
<br> 


<div id="HoastedModal" class="modal fade"> 
    <div class="modal-dialog bigmodal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 id="modal-label">Header</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="modal-body" id="poiModalBody"> 

      <div class="row" id="tree-container"> 
      <div class="col-md-4"> 
       <fieldset> 
       <legend>Groups</legend> 

       <div class="list-group poi-list"> 
        <div id="groups-container"> 
        <a class="list-group-item" data-id="37" href="#" style="display: block;"> <span>ACCOMMODATION, EATING AND DRINKING</span> </a> 
        <a class="list-group-item" data-id="38" href="#" style="display: block;"> <span>COMMERCIAL SERVICES</span> </a> 
        <a class="list-group-item" data-id="39" href="#" style="display: block;"> <span>ATTRACTIONS</span> </a> 
        <a class="list-group-item" data-id="40" href="#" style="display: block;"> <span>SPORT AND ENTERTAINMENT</span> </a> 
        <a class="list-group-item" data-id="41" href="#" style="display: block;"> <span>EDUCATION AND HEALTH</span> </a> 
        <a class="list-group-item" data-id="42" href="#" style="display: block;"> <span>PUBLIC INFRASTRUCTURE</span> </a> 
        <a class="list-group-item" data-id="43" href="#" style="display: block;"> <span>MANUFACTURING AND PRODUCTION</span> </a> 
        <a class="list-group-item" data-id="44" href="#" style="display: block;"> <span>RETAIL</span> </a> 
        <a class="list-group-item" data-id="45" href="#" style="display: block;"> <span>TRANSPORT</span> </a> 
        </div> 

       </div> 
       </fieldset> 
      </div> 
      <div class="col-md-4"> 
       <fieldset> 
       <legend>Categories</legend> 

       <div class="list-group poi-list"> 

        <div id="categories-container"> 
        <a class="list-group-item poi-category" href="#" style="display: block;"> <span>AIR</span> <i data-id="255" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a> 
        <a class="list-group-item poi-category" href="#" style="display: block;"> 
        <span>ROAD AND RAIL</span> <i data-id="256" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a> 
        <a class="list-group-item poi-category" href="#" style="display: block;"> 
        <span>WALKING</span> <i data-id="257" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a> 
        <a class="list-group-item poi-category" href="#" style="display: block;"> 
        <span>WATER</span> <i data-id="258" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a> 
        <a class="list-group-item poi-category" href="#" style="display: block;"> 
        <span>PUBLIC TRANSPORT, STATIONS AND INFRASTRUCTURE</span> <i data-id="259" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a> 
        <a class="list-group-item poi-category" 
        href="#" style="display: block;"> <span>BUS TRANSPORT</span> <i data-id="260" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a> 
        </div> 
       </div> 
       </fieldset> 


      </div> 
      <div class="col-md-4"> 
       <fieldset> 
       <legend>Classes</legend> 

       <div class="list-group poi-list"> 

        <div id="classes-container"> 
        <i class="fa fa-hand-o-left"></i> Please select a cateogy. 
        </div> 
       </div> 
       </fieldset> 
      </div> 
      <div class="clearfix"></div> 
      </div> 
      <hr> 
      <div class="row" id="calculation-section"> 
      <div class="pull-left" id="poi-calculate-quote-container"> 
       <button type="button" id="poi-calculate-price-button" class="btn btn-primary">Calculate Price</button> 
       <button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top" id="poi-reset-button" class="btn btn-primary"> 
       Reset Selection 
       </button> 
       <button type="button" id="poi-addto-basket-button" class="btn btn-success hide">Add To Basket</button> 

      </div> 
      <div class="pull-right"> 
       <button id="poi-tree-close-dialogue-button" class="btn">Close</button> 
      </div> 
      </div> 
      <hr> 

      <div id="quote-section"> 
      <div style="display: none" id="poi-quote-progressbar" class="progress progress-striped active"> 
       <div style="width: 100%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-primary"> 
       <span class="sr-only">Please wait</span> 
       </div> 
      </div> 
      <div id="poi-quote-result"> 

      </div> 
      </div> 

      <div class="clearfix"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!--modal-content--> 
    </div> 
    <!--modal-dialog--> 
</div> 
<!--modal--> 

它的工作的優良在大多數的決議，但在一些決議，它具有與下面的圖片中顯示它對齊問題：

此屏幕截圖取自1613px的屏幕。
但是，如果我讓屏幕略小或更大的對齊問題得到解決：

Answer 1

因爲你的「複選框」不擴展，你可以更多的填充添加到列表中的項目，讓圖標坐在填充以便文本在左側不會在任何斷點處發生干擾：

.list-group-item { 
    padding-right: 40px; 
} 
.list-group-item i { 
    position: absolute; 
    right: 15px; 
}