[英]Font awesome icon alignment issue in bootstrap list-group-item
我正在尝试使用引导程序和超棒字体图标创建自定义清单框。 这是我所做的和输出:
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-->
在大多数分辨率下都可以正常工作,但在某些分辨率下,存在下图所示的对齐问题:
由于您的“复选框”无法缩放,因此您可以在列表项中添加更多填充,并让图标位于填充中,以使左侧的文本不会在任何断点处发生干扰:
.list-group-item {
padding-right: 40px;
}
.list-group-item i {
position: absolute;
right: 15px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.