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

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

关注
发信
关注(28)粉丝(399)

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

本文介绍了使用 Bootstrap 为嵌套列表提供一致的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有办法让 twitter bootstrap 中的嵌套列表看起来像一个普通的列表，嵌套的项目只是缩进(并让它用于任意深度的嵌套)?默认情况下，嵌套列表看起来像

解决方案

嵌套组列表

.just-padding {填充:15px；}.list-group.list-group-root {填充:0；溢出:隐藏；}.list-group.list-group-root .list-group {底边距:0；}.list-group.list-group-root .list-group-item {边界半径:0；边框宽度:1px 0 0 0；}.list-group.list-group-root >.list-group-item:first-child {边框顶部宽度:0；}.list-group.list-group-root >.list-group >.list-group-item {左边距:30px；}.list-group.list-group-root >.list-group >.list-group >.list-group-item {左边距: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">项目 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">Item 1.1.3</a>

<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">Item 1.2.2</a><a href="#" class="list-group-item">Item 1.2.3</a>

<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">Item 1.3.2</a><a href="#" class="list-group-item">Item 1.3.3</a>

<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">Item 2.1.3</a>

<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">Item 2.2.2</a><a href="#" class="list-group-item">Item 2.2.3</a>

<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">Item 2.3.2</a><a href="#" class="list-group-item">Item 2.3.3</a>

<a href="#" class="list-group-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>

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

<a href="#" class="list-group-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>

查看小提琴手:

$(function() {$('.list-group-item').on('click', function() {$('.glyphicon', 这个).toggleClass('glyphicon-chevron-right').toggleClass('glyphicon-chevron-down');});});
.just-padding {填充:15px；}.list-group.list-group-root {填充:0；溢出:隐藏；}.list-group.list-group-root .list-group {底边距:0；}.list-group.list-group-root .list-group-item {边界半径:0；边框宽度:1px 0 0 0；}.list-group.list-group-root >.list-group-item:first-child {边框顶部宽度:0；}.list-group.list-group-root >.list-group >.list-group-item {左边距:30px；}.list-group.list-group-root >.list-group >.list-group >.list-group-item {左边距:45px；}.list-group-item .glyphicon {右边距: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>项目 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>项目 1.1</a><div class="list-group collapse" id="item-1-1"><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">Item 1.1.3</a>

<a href="#item-1-2" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 1.2</a><div class="list-group collapse" id="item-1-2"><a href="#" class="list-group-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>

<a href="#item-1-3" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 1.3</a><div class="list-group collapse" id="item-1-3"><a href="#" class="list-group-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>

<a href="#item-2" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 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>项目 2.1</a><div class="list-group collapse" id="item-2-1"><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">Item 2.1.3</a>

<a href="#item-2-2" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 2.2</a><div class="list-group collapse" id="item-2-2"><a href="#" class="list-group-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>

<a href="#item-2-3" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 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>

<a href="#item-3" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 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>项目 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>

<a href="#item-3-2" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 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>

<a href="#item-3-3" class="list-group-item" data-toggle="collapse"><i class="glyphicon glyphicon-chevron-right"></i>项目 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>

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

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/

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

08-21 10:59
Powered by LMLPHP ©2024 为嵌套列表提供一致的样式 0.037681