Согласованный стиль для вложенных списков с помощью Bootstrap
Есть ли способ сделать вложенные списки в twitter bootstrap похожим на обычный список, а вложенные элементы просто отступают (и работают ли они для произвольного глубокого вложения)? По умолчанию вложенные списки выглядят как this:
![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/
Ответы
Ответ 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
