Bootstrap 3自定义li项目div样式 [英] Bootstrap 3 Customized li item div styling

问题描述

我是Bootstrap 3中的新用户。

我正在Bootstrap 3中创建一个自定义列表。

我所做的是 -

HTML -

  ; ul class =list-group> 
< li class =list-group-itemid =baal> 
< div class =inlinestyle =width：10％;> 
 1 
< / div> 
< div class =inlinestyle =width：10％;> 
 2 
< / div> 
 
< div class =inline nopaddingstyle =width：60％> 
< div> 
 name 
< / div> 
 
< div> 
< div class =inlinestyle =width：33％;> 
 31 
< / div> 
< div class =inlinestyle =width：33％;> 
 32 
< / div> 
< div class =inlinestyle =width：33％;> 
 33 
< / div> 
< / div> 
< div> 
 XXXX 
< / div> 
< / div> 
 
< div class =inlinestyle =width：10％;> 
 4 
< / div> 
< div class =inlinestyle =width：10％;> 
 5 
< / div> 
< / li> 
< li class =list-group-item>音乐< / li> 
< li class =list-group-item>视频< / li> 
< / ul> 
  

CSS -

  div.inline 
 {
 float：left; 
 overflow：auto; 
} 
 
 li.list-group-item 
 {
 min-height：100px; 
 vertical-align：center; 
} 
  

得到这样的列表 -

>

所以我想有一个输出 -

任何人都可以帮助我吗？
提前感谢您的帮助。

解决方案

这有助于使用子菜单而不是div。请参阅 -

< pre class =snippet-code-css lang-css prettyprint-override> * {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-itemid =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>音乐< / li> < li class =list-group-item> Videos< / li>< / ul>  

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.

解决方案

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>

这篇关于Bootstrap 3自定义li项目div样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！