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

Here是问题的图片。我在Bootstrap中使用了.list-group类来完成这些工作列表，我一直在努力做到这一点。问题是，一旦职位名称太长，Bootstrap会将其推到一行，但这会导致列表不均匀。有没有一种方法可以使标题“缩小”以适合盒子太长？谢谢！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>

来源

2015-07-03 user2802559

在[的jsfiddle（HTTP的一些代码： //www.jsfiddle.net）将是伟大的， – Nerdkowski

我可以做到这一点，而无需将所有的Bootstrap加载到jsfiddle中？ [这是链接]（http://getbootstrap.com/components/#list-group-contextual-classes）到我用于列表的CSS类。 – user2802559

试试[这个]（http://www.bootply.com/new） – Nerdkowski

可能有自举类的一些特殊性的问题，但我只想设置保持标题链接的跨度有一个最大宽度，然后设置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; 
}

来源

2015-07-03 23:56:21

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

回答

相关问题