我正在寻找一个bootstrap way
来解决它,但不知何故没有成功因此尝试了css,但它产生的东西如下:
正如您所见,123
已不在列表中。
我的代码如下:
<li class="list-group-item">
<div class=".col-lg-2 pull-left">1</div>
<div class=".col-lg-8 pull-left">2</div>
<div class=".col-lg-4 pull-left">3</div>
</li>
JS Fiddle
答案 0 :(得分:2)
尝试将列包装在一行中。请参阅grid上的文档。
<li class="list-group-item">
<div class="row">
<div class="col-lg-2">1</div>
<div class="col-lg-8">2</div>
<div class="col-lg-4">3</div>
</div>
</li>
答案 1 :(得分:2)
<li class="list-group-item">
<div class="row">
<div class=".col-lg-2 pull-left">1</div>
<div class=".col-lg-8 pull-left">2</div>
<div class=".col-lg-4 pull-left">3</div>
</div>
</li>
.col-xx-yy
个类应包含在.row
类中
Fiddle Demo
答案 2 :(得分:1)
根据您的代码,div
内的li
是解决方案。
<div class="container">
<ul class="list-group">
<li class="list-group-item">
<div class="col-lg-2 pull-left">1</div>
<div class="col-lg-8 pull-left">2</div>
<div class="col-lg-4 pull-left">3</div>
<div class="clearfix"></div> <!-- Just clear the float and everything will be ok-->
</li>
</ul>
希望这对你有所帮助。这是 Demo。
答案 3 :(得分:0)
我认为使用那些ul,li ...并不是一个好主意...让它只是s
它会让它变得更容易:)
好吧,也许可以使用css ..尝试使div的高度更高:)