在LI标签中对齐3个div

Question

我正在寻找一个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

http://jsfiddle.net/6bszgn85/

Answer 1

尝试将列包装在一行中。请参阅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>

Answer 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

Answer 3

根据您的代码，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。

Answer 4

我认为使用那些ul，li ...并不是一个好主意...让它只是s

它会让它变得更容易：）

好吧，也许可以使用css ..尝试使div的高度更高:)