使用 Bootstrap 为嵌套列表提供一致的样式-解网

问：

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

Nested lists with 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>

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

What nested lists should look like

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

[HTML全文] CSS的叽叽喳喳的引导推特引导-3 嵌套列表

答：

5赞 Rohit Bandooni 3/16/2015 #1

单程

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

1赞 3/16/2015

这是朝着正确的方向发展，但我想在列表项之间保持水平线，并且该方法需要适用于任意深度的嵌套。谢谢

9赞 Óscar Gómez Alcañiz 7/7/2015 #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，那么将该类添加到您的分组列表中就可以了。请参见 JSFiddle： https://jsfiddle.net/oscar_dr/d2wpn8sd/1/.list-group-collapse

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

编辑：添加了要回答的片段：

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

152赞 Marcos 11/7/2015 #3

嵌套组列表

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

9赞 Apollo3zehn 6/25/2017 #4

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

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

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

JSFiddle

7赞 Beengie 2/15/2019 #5

Bootstrap 4 更新

我希望能够在 bootstrap 4 中使用它。希望这对其他人有所帮助。

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

工作 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');
  });

});

1赞 Senthil 2/6/2022 #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>

1赞 Bryan Masephol 3/23/2022 #7

Beengie 为 Bootstrap 4 提供的更新在 Bootstrap 5 中对我有用，但稍作调整。

需要改变

data-toggle="collapse"

自

data-bs-toggle="collapse"

上一个：如何在Bitbucket中标记嵌套列表项？

下一个：嵌套列表中的 Linq - 选择所有 ID

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

Consistent Styling for Nested Lists with Bootstrap

评论

评论