Bootstrap 3 Customized li item div styling

Question

I am new in Bootstrap 3.

I am trying to create a customized list in Bootstrap 3.

What I have done is-

HTML-

<ul class="list-group">
    <li class="list-group-item" id="baal">
            <div class="inline" style="width : 10%;">
                1
            </div>
            <div class="inline" style="width : 10%;">
                2
            </div>

            <div class="inline nopadding" style="width : 60%">
                <div>
                    name
                </div>

                <div>
                    <div class="inline" style="width : 33%;">
                        31
                    </div>
                    <div class="inline" style="width : 33%;">
                        32
                    </div>
                    <div class="inline" style="width : 33%;">
                        33
                    </div>
                </div>
                <div>
                    XXXX
                </div>
            </div>

            <div class="inline" style="width : 10%;">
                4
            </div>
            <div class="inline" style="width : 10%;">
                5
            </div>
    </li>
    <li class="list-group-item">Music</li>
    <li class="list-group-item">Videos</li>
</ul>

CSS-

div.inline
{
    float:left;
    overflow: auto;
}

li.list-group-item
{
    min-height: 100px;
    vertical-align : center;
}

And getting a list like this-

But I want to have the inner items vertically aligned.

So I want to have a output like it-

Can anyone help me please? Thanks in advance for helping.

Answer 1

This lends itself to using a sub-menu rather than divs. See -

 * { margin: 0; padding: 0; } li { list-style: none; } li.list-group-item { min-height: 100px; vertical-align: center; } .sub li { display: inline-block; vertical-align: middle; text-align: center; width: 10%; } 

 <ul class="list-group"> <li class="list-group-item" id="baal"> <ul class="sub"> <li class="inline">1</li> <li class="inline">2</li> <li class="inline"> <p>name</p> <p>31</p> <p>XXXX</p> </li> <li class="inline">32</li> <li class="inline">33</li> <li class="inline">4</li> <li class="inline">5</li> </ul> </li> <li class="list-group-item">Music</li> <li class="list-group-item">Videos</li> </ul> 

Answer 2

Use the grid system, probably worth noting however that this will only work with up to 12 records.

<div class="container">

    <div class="row">
        <div class="col-lg-1 col-lg-offset-2">
            Name
        </div>
    </div>

    <div class="row">
       <div class="col-lg-1">
           1
       </div>
       <div class="col-lg-1">
           2
       </div>
        <div class="col-lg-1">
           3
       </div>
        <div class="col-lg-1">
           4
       </div>
        <div class="col-lg-1">
           5
       </div>
        <div class="col-lg-1">
           6
       </div>
        <div class="col-lg-1">
           7
       </div>
    </div>

    <div class="row">
        <div class="col-lg-1 col-lg-offset-2">
            xxxx
        </div>
    </div>

</div>

produces:

Answer 3

如果要使用“垂直对齐”，则应在“ .list-group-item”类中添加“ display：table-cell”