使用引导的嵌套列表的一致样式 [英] Consistent Styling for Nested Lists with Bootstrap

问题描述

有一种方法可以使嵌套列表在twitter bootstrap看起来像一个正常的列表，嵌套项目只是缩进（和它的工作，任意深嵌套）？默认情况下，嵌套列表看起来像

解决方案

嵌套组列表 p>

  .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 =stylesheethref =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>项目1< / a> < div class =list-group> < a href =＃class =list-group-item>项目1.1< / a> < div class =list-group> < a href =＃class =list-group-item>项目1.1.1< / a> < a href =＃class =list-group-item>项目1.1.2< / a> < a href =＃class =list-group-item>项目1.1.3< / a> < / div> < a href =＃class =list-group-item>项目1.2< / a> < div class =list-group> < a href =＃class =list-group-item>项目1.2.1< / a> < a href =＃class =list-group-item>项目1.2.2< / a> < a href =＃class =list-group-item>项目1.2.3< / a> < / div> < a href =＃class =list-group-item>项目1.3< / a> < div class =list-group> < a href =＃class =list-group-item>项目1.3.1< / a> < a href =＃class =list-group-item>项目1.3.2< / a> < a href =＃class =list-group-item>项目1.3.3< / a> < / div> < / div> < a href =＃class =list-group-item>项目2< / a> < div class =list-group> < a href =＃class =list-group-item>项目2.1< / a> < div class =list-group> < a href =＃class =list-group-item>项目2.1.1< / a> < a href =＃class =list-group-item>项目2.1.2< / a> < a href =＃class =list-group-item>项目2.1.3< / a> < / div> < a href =＃class =list-group-item>项目2.2< / a> < div class =list-group> < a href =＃class =list-group-item>项目2.2.1< / a> < a href =＃class =list-group-item>项目2.2.2< / a> < a href =＃class =list-group-item>项目2.2.3< / a> < / div> < a href =＃class =list-group-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>项目2.3.2< / a> < a href =＃class =list-group-item>项目2.3.3< / a> < / div> < / div> < a href =＃class =list-group-item>项目3< / a> < div class =list-group> < a href =＃class =list-group-item>项目3.1< / a> < div class =list-group> < a href =＃class =list-group-item>项目3.1.1< / a> < a href =＃class =list-group-item>项目3.1.2< / a> < a href =＃class =list-group-item>项目3.1.3< / a> < / div> < a href =＃class =list-group-item>项目3.2< / a> < div class =list-group> < a href =＃class =list-group-item>项目3.2.1< / a> < a href =＃class =list-group-item>项目3.2.2< / a> < a href =＃class =list-group-item>项目3.2.3< / a> < / div> < a href =＃class =list-group-item>项目3.3< / a> < div class =list-group> < a href =＃class =list-group-item>项目3.3.1< / a> < a href =＃class =list-group-item>项目3.3.2< / a> < a href =＃class =list-group-item>项目3.3.3< / a> < / div> < / div> < / div> < / div>  

在fiddler上查看：

Is there a way to make nested lists in twitter bootstrap look like a normal list, with the nested items simply indented (and have it work for an arbitrarily deep nesting)? By default, nested lists look like 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>

How can I make these nested lists appear like this (or in some similar way):

In case you missed the link above, here is the JSFiddle: https://jsfiddle.net/7o8rp0kv/1/

解决方案

Nested Group Lists

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

View on fiddler: https://jsfiddle.net/u3gd85cj/

---

Nested Group Lists (Collapsable)

$(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>

View on fiddler: https://jsfiddle.net/ann7tctp/

这篇关于使用引导的嵌套列表的一致样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！