html - Bootstrap-如何防止这两个列表不均匀？

Question

Here是问题的图片。我在 Bootstrap 中使用 .list-group 类来获取这些工作列表，我一直在努力使它们保持平衡。问题是一旦职位太长，Bootstrap 会将其推到一行，但这会导致列表不均匀。有没有办法让太长的标题“缩小”以适应盒子？谢谢!

编辑:目前 Bootply 不允许我“保存”代码，但我已经运行了它，因此如果您在其中运行这段代码，您将能够对其进行试验 here .

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

Answer 1

bootstrap 类可能存在一些特殊性问题，但我只是将包含标题链接的跨度设置为具有最大宽度，然后设置 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;
}