Согласованный стиль для вложенных списков с помощью Bootstrap

Есть ли способ сделать вложенные списки в 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>

Ответ 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/

Конечно, вы можете расширить BS с помощью этого класса или изменить значения на свои пользовательские меры, если у вас есть настроенный Bootstrap.

EDIT: Добавлен фрагмент ответа:

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

Ответ 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/

Ответ 4

ИЗМЕНИТЬ ОБНОВЛЕНИЕ: Мои извинения. Я вижу, что этот вопрос запрашивал решение для начальной загрузки, однако я буду держать этот ответ здесь, если кто-то наткнется на это, ища решение, которое не касается любые рамки или библиотеки css

Пример решения, не использующего каких-либо фреймворков или библиотек 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/

Ответ 5

Я изменил ответ Маркоса на работу с Bootstrap 4 (и форс-удивительными значками), поскольку глификоны больше не являются частью Bootstrap. Основные изменения:

заменить глификоны на знаменательные символы
добавить класс list-group-item-action в list-group-item
redefine.collapse в css (возможно, есть лучший подход)

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

JSFiddle