下面是问题的图片。我正在使用Bootstrap中的.list group类来列出这些工作清单,我一直在努力使其平衡。问题是,一旦一个职位头衔太长,Bootstrap就会把它推到下一行,但这会导致列表不均匀。有没有一种方法可以让太长的标题"缩小"到不适合盒子的程度?非常感谢。
编辑:目前Bootply不允许我"保存"代码,但我已经运行了它,所以如果你在其中运行这个代码,你就可以在这里进行实验。
<div class="col-md-6 text-right">
<h2 class="table-section-heading text-center">Premium Listings</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success"><span style="font-size:26px" class="alink"><a href="#">50% Off Winter All Coats #Macys </a></span><span style="font-size:16px"> <i>(ad)</i></span></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Table Put Together</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Beverly Hills, CA</span></i></span> - <b><span class="label label-success">$54.00</span></b></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Dog Sitter</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Hudson, OH</span></i></span> - <b><span class="label label-success">$92.00</span></b></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Shopping</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Hudson, OH</span></i></span> - <b><span class="label label-success">$150.00</span></b></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Driver</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Valencia , CA</span></i></span> - <b><span class="label label-success">$45.00</span></b></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Receptionist for a day</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chicago, IL</span></i></span> - <b><span class="label label-success">$80.00</span></b></li>
</ul><table class="table">
</table>
</div>
<!-- /Premium listings table -->
<!-- Jobs near you table -->
<div class="col-md-6" style="float:right;">
<h2 class="table-section-heading text-center">Near you</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-info premium"><span style="font-size:26px" class="text-nowrap"><a href="#">Table Put Together</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Beverly Hills, CA</span></i></span> - <b><span class="label label-success">$54.00</span></b></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info standard"><span style="font-size:26px" class="text-nowrap"><a href="#">This list long. Too long. Looking for driver.</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Beverly Hills , CA</span></i></span> - <b><span class="label label-success">$85.00</span></b></li>
</ul><ul class="list-group">
<li class="list-group-item list-group-item-info premium"><span style="font-size:26px" class="text-nowrap"><a href="#">Driver</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Valencia , CA</span></i></span> - <b><span class="label label-success">$45.00</span>
</div>
引导类可能存在一些特殊性问题,但我只会将包含标题链接的跨度设置为最大宽度,然后设置text-overflow
。我个人会增加所有部分的宽度,这样所有部分都会排成一行,但第一部分应该解决你的问题:
所以类似于:
<span class="title-box" style="font-size:26px"><a href="#">Dog Sitter</a></span>
#CSS
.title-box{
max-width: /*some value in pixels or ems*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}