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

有没有办法让twitter bootstrap中的嵌套列表看起来像一个普通的列表，嵌套的项目简单地缩进（并适用于任意深嵌套）？ 默认情况下，嵌套列表如下所示 ：

<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/

Answer 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> 

Answer 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，或者把值改为你的自定义度量值。

编辑：添加片段回答：

 .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="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> 

Answer 3

单程

 <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/

Answer 4

编辑更新： 我的道歉，我看到这个问题是要求bootstrap解决scheme，但是我会保持这个答案在这里，如果有人绊倒在这寻找一个解决scheme，不处理任何css框架或图书馆

---

示例解决scheme不使用任何CSS框架或库

这是我的一个嵌套列表的例子。

我认为这更优雅。 不需要额外的div，除非你想在造型时更好地控制嵌套列表。

  <div class="nested-list-container"> <h3 class="list-title">Nested List Example</h3> <ul class="main-list"> <li class="nested-list"> List 1 <ul> <li class="nested-list"> List 1 - 2 <ul> <li>About Me</li> <li>Blog</li> <li>Portfolio</li> </ul> </li> </ul> </li> <li>List 2</li> <li>List 3</li> <li>List 4</li> </ul> </div> 

和我的风格（我使用sass的方式，随意使用sass到CSS转换器）：

  .nested-list-container { padding: 10px; .list-title { text-align: center; } .main-list { border: none; } .nested-list { padding-bottom: 20px; } ul { list-style: none; } li { border: 1px solid #ddd; border-bottom: none; line-height: 50px; padding-left: 10px; &:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; border-top: 1px solid #ddd; } &:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom: 1px solid #ddd; } } } 

JSFiddle： https ：//jsfiddle.net/d7jm7y6o/2/

Answer 5

我修改了Marcos的答案与Bootstrap 4（和fort-awesome图标）一起工作，因为glyphicons不再是Bootstrap的一部分。 主要变化是：

• 用fort-awesome图标代替glyphicons
• 将list-group-item-action添加到list-group-item
• 在CSS中重新定义.collapse（也许有更好的方法）

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

的jsfiddle