使用 Bootstrap 实现嵌套列表的一致样式

Posted 2023-03-06

技术标签:

【中文标题】使用 Bootstrap 实现嵌套列表的一致样式【英文标题】：Consistent Styling for Nested Lists with Bootstrap 【发布时间】：2015-05-17 18:22:32 【问题描述】：

有没有办法让 twitter bootstrap 中的嵌套列表看起来像一个普通列表，嵌套项目只是缩进（并且可以用于任意深度的嵌套）？默认情况下，嵌套列表看起来像this：

<ul class="list-group">
    <li class="list-group-item">One</li>
    <li class="list-group-item">Two
        <ul class="list-group">
            <li class="list-group-item">Item 2a</li>
            <li class="list-group-item">Item 2b</li>
        </ul>
    </li>
    <li class="list-group-item">Three
        <ul class="list-group">
            <li class="list-group-item">Item 3a</li>
            <li class="list-group-item">Item 3b</li>
        </ul>
    </li>
</ul>

我怎样才能使这些嵌套列表看起来像这样（或以某种类似的方式）：

如果您错过了上面的链接，这里是 JSFiddle：https://jsfiddle.net/7o8rp0kv/1/

【问题讨论】：

【参考方案1】：

嵌套组列表

.just-padding 
  padding: 15px;


.list-group.list-group-root 
  padding: 0;
  overflow: hidden;


.list-group.list-group-root .list-group 
  margin-bottom: 0;


.list-group.list-group-root .list-group-item 
  border-radius: 0;
  border-width: 1px 0 0 0;


.list-group.list-group-root > .list-group-item:first-child 
  border-top-width: 0;


.list-group.list-group-root > .list-group > .list-group-item 
  padding-left: 30px;


.list-group.list-group-root > .list-group > .list-group > .list-group-item 
  padding-left: 45px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="just-padding">

<div class="list-group list-group-root well">
  
  <a href="#" class="list-group-item">Item 1</a>
  <div class="list-group">
    
    <a href="#" class="list-group-item">Item 1.1</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 1.2</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1.2.1</a>
      <a href="#" class="list-group-item">Item 1.2.2</a>
      <a href="#" class="list-group-item">Item 1.2.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 1.3</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1.3.1</a>
      <a href="#" class="list-group-item">Item 1.3.2</a>
      <a href="#" class="list-group-item">Item 1.3.3</a>
    </div>
    
  </div>
  
  <a href="#" class="list-group-item">Item 2</a>
  <div class="list-group">
    
    <a href="#" class="list-group-item">Item 2.1</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 2.1.1</a>
      <a href="#" class="list-group-item">Item 2.1.2</a>
      <a href="#" class="list-group-item">Item 2.1.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 2.2</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 2.2.1</a>
      <a href="#" class="list-group-item">Item 2.2.2</a>
      <a href="#" class="list-group-item">Item 2.2.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 2.3</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 2.3.1</a>
      <a href="#" class="list-group-item">Item 2.3.2</a>
      <a href="#" class="list-group-item">Item 2.3.3</a>
    </div>
    
  </div>
  
  
  <a href="#" class="list-group-item">Item 3</a>
  <div class="list-group">
    
    <a href="#" class="list-group-item">Item 3.1</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 3.1.1</a>
      <a href="#" class="list-group-item">Item 3.1.2</a>
      <a href="#" class="list-group-item">Item 3.1.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 3.2</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 3.2.1</a>
      <a href="#" class="list-group-item">Item 3.2.2</a>
      <a href="#" class="list-group-item">Item 3.2.3</a>
    </div>
    
    <a href="#" class="list-group-item">Item 3.3</a>
    <div class="list-group">
      <a href="#" class="list-group-item">Item 3.3.1</a>
      <a href="#" class="list-group-item">Item 3.3.2</a>
      <a href="#" class="list-group-item">Item 3.3.3</a>
    </div>
    
  </div>
  
</div>
  
</div>

查看提琴手：https://jsfiddle.net/u3gd85cj/

嵌套组列表（可折叠）

$(function() 
        
  $('.list-group-item').on('click', function() 
    $('.glyphicon', this)
      .toggleClass('glyphicon-chevron-right')
      .toggleClass('glyphicon-chevron-down');
  );

);

.just-padding 
  padding: 15px;


.list-group.list-group-root 
  padding: 0;
  overflow: hidden;


.list-group.list-group-root .list-group 
  margin-bottom: 0;


.list-group.list-group-root .list-group-item 
  border-radius: 0;
  border-width: 1px 0 0 0;


.list-group.list-group-root > .list-group-item:first-child 
  border-top-width: 0;


.list-group.list-group-root > .list-group > .list-group-item 
  padding-left: 30px;


.list-group.list-group-root > .list-group > .list-group > .list-group-item 
  padding-left: 45px;


.list-group-item .glyphicon 
  margin-right: 5px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="just-padding">

<div class="list-group list-group-root well">
  
  <a href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 1
  </a>
  <div class="list-group collapse" id="item-1">
    
    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
    </a>
    <div class="list-group collapse" id="item-1-1">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>
    
    <a href="#item-1-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
    </a>
    <div class="list-group collapse" id="item-1-2">
      <a href="#" class="list-group-item">Item 1.2.1</a>
      <a href="#" class="list-group-item">Item 1.2.2</a>
      <a href="#" class="list-group-item">Item 1.2.3</a>
    </div>
    
    <a href="#item-1-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
    </a>
    <div class="list-group collapse" id="item-1-3">
      <a href="#" class="list-group-item">Item 1.3.1</a>
      <a href="#" class="list-group-item">Item 1.3.2</a>
      <a href="#" class="list-group-item">Item 1.3.3</a>
    </div>
    
  </div>
  
  <a href="#item-2" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 2
  </a>
  <div class="list-group collapse" id="item-2">
    
    <a href="#item-2-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 2.1
    </a>
    <div class="list-group collapse" id="item-2-1">
      <a href="#" class="list-group-item">Item 2.1.1</a>
      <a href="#" class="list-group-item">Item 2.1.2</a>
      <a href="#" class="list-group-item">Item 2.1.3</a>
    </div>
    
    <a href="#item-2-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 2.2
    </a>
    <div class="list-group collapse" id="item-2-2">
      <a href="#" class="list-group-item">Item 2.2.1</a>
      <a href="#" class="list-group-item">Item 2.2.2</a>
      <a href="#" class="list-group-item">Item 2.2.3</a>
    </div>
    
    <a href="#item-2-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 2.3
    </a>
    <div class="list-group collapse" id="item-2-3">
      <a href="#" class="list-group-item">Item 2.3.1</a>
      <a href="#" class="list-group-item">Item 2.3.2</a>
      <a href="#" class="list-group-item">Item 2.3.3</a>
    </div>
    
  </div>
  
  
  <a href="#item-3" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 3
  </a>
  <div class="list-group collapse" id="item-3">
    
    <a href="#item-3-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 3.1
    </a>
    <div class="list-group collapse" id="item-3-1">
      <a href="#" class="list-group-item">Item 3.1.1</a>
      <a href="#" class="list-group-item">Item 3.1.2</a>
      <a href="#" class="list-group-item">Item 3.1.3</a>
    </div>
    
    <a href="#item-3-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 3.2
    </a>
    <div class="list-group collapse" id="item-3-2">
      <a href="#" class="list-group-item">Item 3.2.1</a>
      <a href="#" class="list-group-item">Item 3.2.2</a>
      <a href="#" class="list-group-item">Item 3.2.3</a>
    </div>
    
    <a href="#item-3-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 3.3
    </a>
    <div class="list-group collapse" id="item-3-3">
      <a href="#" class="list-group-item">Item 3.3.1</a>
      <a href="#" class="list-group-item">Item 3.3.2</a>
      <a href="#" class="list-group-item">Item 3.3.3</a>
    </div>
    
  </div>
  
</div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

查看提琴手：https://jsfiddle.net/ann7tctp/

【讨论】：

最后，我们有一个赢家！带引导的有用分层列表嗨，你能帮我把这个列表用 JQuery Sortable 排序吗？我在使用父元素时遇到了困难。谢谢是什么让过渡变得平滑而渐进——即子列表看起来好像在滑出？我使用 AngularJS 而不是 JQuery 实现了这一点，并且没有平滑过渡。很好的答案，唯一的缺点是快速点击会弄乱图标【参考方案2】：

这是我的方法：

    .list-group-collapse li > ul li:first-child 
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    

    .list-group-collapse li > ul 
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -11px;

如果您使用的是 BS3，那么将 .list-group-collapse 类添加到您的分组列表中就可以了。见 JSFiddle：https://jsfiddle.net/oscar_dr/d2wpn8sd/1/

当然，如果您有自定义的 Bootstrap，您可以使用此类扩展 BS 或将值更改为您的自定义度量值。

编辑：添加了 sn-p 来回答：

.list-group-collapse li>ul li:first-child 
  border-top-left-radius: 0;
  border-top-right-radius: 0;


.list-group-collapse li>ul 
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -11px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <h4>
        With collapse
      </h4>
      <hr>
      <ul class="list-group list-group-collapse">
        <li class="list-group-item">
          <h3>
            Level 1
          </h3>

          <ul class="list-group">
            <li class="list-group-item">
              <h4>
                Level 2.1
              </h4>

              <ul class="list-group">
                <li class="list-group-item">
                  Item 2.1.1
                </li>
                <li class="list-group-item">
                  Item 2.1.2
                </li>
                <li class="list-group-item">
                  Item 2.1.3
                </li>
              </ul>
            </li>

            <li class="list-group-item">
              <h4>
                Level 2.2
              </h4>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="col-xs-6">
      <h4>
        Without collapse
      </h4>
      <hr>
      <ul class="list-group">
        <li class="list-group-item">
          <h3>
            Level 1
          </h3>

          <ul class="list-group">
            <li class="list-group-item">
              <h4>
                Level 2.1
              </h4>

              <ul class="list-group">
                <li class="list-group-item">
                  Item 2.1.1
                </li>
                <li class="list-group-item">
                  Item 2.1.2
                </li>
                <li class="list-group-item">
                  Item 2.1.3
                </li>
              </ul>
            </li>

            <li class="list-group-item">
              <h4>
                Level 2.2
              </h4>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

当您考虑如何自然编写代码时，这是一种非常优雅的方法接受的答案是好的，但这是一个更好、更自然的解决方案。当您使用移动侧边栏时，可接受的解决方案上的额外边距会破坏 UI 布局，而移动设备上的第三级第二级是不可能的。认为这种带有可折叠选项的方法将是完美的。【参考方案3】：

我修改了 Marcos 的答案以使用 Bootstrap 4（和 fort-awesome 图标），因为字形图标不再是 Bootstrap 的一部分。主要变化有：

用精美的图标替换字形图标将类 list-group-item-action 添加到list-group-item 在 css 中重新定义 .collapse（也许有更好的方法）

.collapse 
    display: none;
    &.show 
        display: block;

JSFiddle

【讨论】：

您可能没有得到答案的检查或那么多的赞成票，但绝对有用。你能解释一下&. 在做什么吗？是不是很牛逼？如何控制折叠事件？我希望项目在开始时不折叠只需像这样添加show 类样式：<div class="list-group collapse show" id="item-1">。很好的例子！使用 JQuery 是否有一种简单的方法，我可以添加一个按钮或复选框来展开或显示所有折叠的项目，如果他们再次按下它会折叠所有项目？ @Chris，对不起，我不是经验丰富的 javascript 开发人员。希望其他人知道如何做到这一点。【参考方案4】：

一种方式

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
            <li class="list-group-item">One</li>
            <li class="list-group-item">Two
                <ul class="list-group inner">
                    <li class="list-group-item">Item 2a</li>
                    <li class="list-group-item">Item 2b</li>
                </ul>
            </li>
            <li class="list-group-item">Three
                <ul class="list-group inner">
                    <li class="list-group-item">Item 3a</li>
                    <li class="list-group-item">Item 3b</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<style>
.list-group.inner li
 border:none;


</style>

https://jsfiddle.net/7o8rp0kv/3/

【讨论】：

这是正确的方向，但我想保持列表项之间的水平线，并且该方法需要适用于任意深度的嵌套。谢谢因为列表是从项目的层次结构动态生成的，我使用引导程序的折叠使其类似于手风琴。【参考方案5】：

Bootstrap 4 更新

我希望能够将它与 bootstrap 4 一起使用。希望这对其他人有所帮助。

这是使用 font awesome 的代码（因为 V4 不支持字形图标）。

Working jfiddle

html

<div class="just-padding">

  <div class="list-group list-group-root card">

    <a href="#item-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i></i>Item 1
    </a>
    <div class="list-group collapse" id="item-1">

    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 1.1
    </a>
    <div class="list-group collapse" id="item-1-1">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>

    <a href="#item-1-2" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 1.2
    </a>
    <div class="list-group collapse" id="item-1-2">
      <a href="#" class="list-group-item">Item 1.2.1</a>
      <a href="#" class="list-group-item">Item 1.2.2</a>
     <a href="#" class="list-group-item">Item 1.2.3</a>
    </div>

    <a href="#item-1-3" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 1.3
    </a>
    <div class="list-group collapse" id="item-1-3">
      <a href="#" class="list-group-item">Item 1.3.1</a>
      <a href="#" class="list-group-item">Item 1.3.2</a>
      <a href="#" class="list-group-item">Item 1.3.3</a>
    </div>

  </div>

  <a href="#item-2" class="list-group-item" data-toggle="collapse">
    <i class="fas fa-angle-right mr-2"></i>Item 2
  </a>
  <div class="list-group collapse" id="item-2">

    <a href="#item-2-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 2.1
    </a>
    <div class="list-group collapse" id="item-2-1">
      <a href="#" class="list-group-item">Item 2.1.1</a>
      <a href="#" class="list-group-item">Item 2.1.2</a>
      <a href="#" class="list-group-item">Item 2.1.3</a>
    </div>

    <a href="#item-2-2" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 2.2
    </a>
    <div class="list-group collapse" id="item-2-2">
      <a href="#" class="list-group-item">Item 2.2.1</a>
      <a href="#" class="list-group-item">Item 2.2.2</a>
      <a href="#" class="list-group-item">Item 2.2.3</a>
    </div>

    <a href="#item-2-3" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 2.3
    </a>
    <div class="list-group collapse" id="item-2-3">
      <a href="#" class="list-group-item">Item 2.3.1</a>
      <a href="#" class="list-group-item">Item 2.3.2</a>
      <a href="#" class="list-group-item">Item 2.3.3</a>
    </div>
  </div>

  <a href="#item-3" class="list-group-item" data-toggle="collapse">
    <i class="fas fa-angle-right mr-2"></i>Item 3
  </a>
  <div class="list-group collapse" id="item-3">

    <a href="#item-3-1" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 3.1
    </a>
    <div class="list-group collapse" id="item-3-1">
      <a href="#" class="list-group-item">Item 3.1.1</a>
      <a href="#" class="list-group-item">Item 3.1.2</a>
      <a href="#" class="list-group-item">Item 3.1.3</a>
    </div>

    <a href="#item-3-2" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 3.2
    </a>
    <div class="list-group collapse" id="item-3-2">
      <a href="#" class="list-group-item">Item 3.2.1</a>
      <a href="#" class="list-group-item">Item 3.2.2</a>
      <a href="#" class="list-group-item">Item 3.2.3</a>
    </div>

    <a href="#item-3-3" class="list-group-item" data-toggle="collapse">
      <i class="fas fa-angle-right mr-2"></i>Item 3.3
    </a>
    <div class="list-group collapse" id="item-3-3">
      <a href="#" class="list-group-item">Item 3.3.1</a>
      <a href="#" class="list-group-item">Item 3.3.2</a>
      <a href="#" class="list-group-item">Item 3.3.3</a>
    </div>

  </div>

</div>

CSS

.just-padding 
  padding: 15px;


.list-group.list-group-root 
  padding: 0;
  overflow: hidden;


.list-group.list-group-root .list-group 
  margin-bottom: 0;


.list-group.list-group-root .list-group-item 
  border-radius: 0;
  border-width: 1px 0 0 0;


.list-group.list-group-root > .list-group-item:first-child 
  border-top-width: 0;


.list-group.list-group-root > .list-group > .list-group-item 
  padding-left: 30px;


.list-group.list-group-root > .list-group > .list-group > .list-group-item 
  padding-left: 45px;


.list-group-item .glyphicon 
  margin-right: 5px;

Javascript

$(function() 

  $('.list-group-item').on('click', function() 
    $('.fas', this)
      .toggleClass('fa-angle-right')
      .toggleClass('fa-angle-down');
  );

);

【讨论】：

由于某种原因，这对我使用 bootstrap 4.3.1 不起作用。列表项没有边框，并且图标不起作用。任何线索为什么？【参考方案6】：

我想要一些没有自定义 CSS 和嵌套的更简单的东西。使用边距非常适合缩进。

记下ml-4 以获取下面的空白。实际上不需要代码缩进，因为我们没有创建嵌套行。只是为了清楚起见而缩进。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <h6 class="text-muted">Links</h6> 
      <ul class="list-group">
        <li class="list-group-item"><i class="fas fa-user fa-lg text-info mx-2"></i><a href="/someuser">User List</a></li>
        <li class="list-group-item"><i class="fas fa-barcode fa-lg text-success mx-2"></i><a href="/someproduct">Products and Pricing</a></li>
        <li class="list-group-item"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i>Reference Tables</li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testmaster">Reference Master</a></li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testdetail">Reference Detail</a></li>
        <li class="list-group-item"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i>Reference Define Fields</li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testdfmaster">Reference Define Fields Master</a></li>
            <li class="list-group-item ml-4"><i class="fas fa-clipboard-list fa-lg text-primary mx-2"></i><a href="/testdfdetail">Reference Define Fields Detail</a></li>
        <li class="list-group-item"><i class="fas fa-drafting-compass fa-lg text-warning mx-2"></i><a href="/anothermaster">Template</a></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

以上是关于使用 Bootstrap 实现嵌套列表的一致样式的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap常用布局样式

带有或不带有 Twitter Bootstrap 的嵌套侧边栏

使用 bootstrap v3 为 asp.net 下拉列表控件添加样式

Vue--》搭配Bootstrap实现Vue的列表增删功能

Cant 样式 ul 列表（bootstrap 4，wordpress 主题）

Bootstrap 可嵌套列表组 - JQuery 可排序