Bootstrap 3 自定义 li item div 样式答案

【问题标题】：Bootstrap 3 Customized li item div stylingBootstrap 3 自定义 li item div 样式
【发布时间】：2015-02-04 23:02:31
【问题描述】：

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

得到一个这样的列表-

但我想让内部项目垂直对齐。

所以我想要一个这样的输出-

谁能帮帮我？提前感谢您的帮助。

【问题讨论】：

div 本质上是一个子菜单...为什么不使用这种结构？
看起来你最好用一张桌子
我不知道如何使用结构。能给我举个例子吗？
@AbrarJahin 您可以使用引导网格系统（请参阅下面的答案），但是它最多只能处理 12 条记录，因为引导程序就是这样分解它的行。如果您需要更多，我会使用 Paulie_Ds 的答案。
Bootstrap 3 custom li element with div designing 的可能重复项

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案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>

产生：

【讨论】：

【解决方案3】：

如果你想使用“vertical-align”，你应该在 .list-group-item 类中添加“display: table-cell”

【讨论】：