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

如果你想使用"vertical-align"，你应该添加"display: table-cell"到.list-group-item class

Bootstrap 3 项自定义 li 项 div 样式

Bootstrap 3 Customized li item div styling

html

css

twitter-bootstrap

twitter-bootstrap-3