0
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>
在[的jsfiddle(HTTP的一些代碼: //www.jsfiddle.net)將是偉大的, – Nerdkowski
我可以做到這一點,而無需將所有的Bootstrap加載到jsfiddle中? [這是鏈接](http://getbootstrap.com/components/#list-group-contextual-classes)到我用於列表的CSS類。 – user2802559
試試[這個](http://www.bootply.com/new) – Nerdkowski