html - Bootstrap 3 自定义 li item 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>