Bootstrap 3定制的li项目div样式

Question

我是Bootstrap 3的新手。

我正在尝试在Bootstrap 3中创建自定义列表。

我所做的是 -

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

获得这样的列表 -

但我想让内部物品垂直对齐。

所以我希望得到类似的输出 -

有人能帮帮我吗？ 在此先感谢您的帮助。

Answer 1

这有助于使用子菜单而不是div。见 -

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

使用网格系统，可能值得注意的是，这只能用于最多12条记录。

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

产生

Answer 3

如果你想使用＆＃34; vertical-align＆＃34;，你应该添加＆＃34; display：table-cell＆＃34;到.list-group-item类