在LI标签中对齐3个div

时间:2015-09-14 18:12:29

标签: html css twitter-bootstrap

我正在寻找一个bootstrap way来解决它,但不知何故没有成功因此尝试了css,但它产生的东西如下:

enter image description here

正如您所见,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

http://jsfiddle.net/6bszgn85/

4 个答案:

答案 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的高度更高:)