在LI标签中对齐3个div

Question

I am looking a bootstrap way to solve it but somehow not successful hence tried css one but it's producing thing like:

As you can see 123 is going out of list.

My code is given below:

<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

Try wrapping your columns in a row. See docs on 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 classes should be wrapped in .row class Fiddle Demo

Answer 3

As per your code, div inside li here is the solution.

<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>

Hope this help you.! Here is the Demo .

Answer 4

I think that it is not good idea to use those ul, li... make it just s

It will make it much more easier :)

Well, maybe use css .. try to make heigher height of the divs :)