我已經開始使用Twitter Bootstrap，它對我（作爲程序員）來說很有用，可以在不必編寫太多CSS的情況下獲得一個體面的外觀網站。HTML/CSS中嵌套列表的縮進
但是有些東西令我發狂。我有一個嵌套表像
<ul>
<li>Hello</li>
<li>World
<ul>
<li>Wide</li>
<li>Web</li>
</ul>
</li>
</ul>
但是這個列表的第一級和第二級沒有得到縮進不同（即它們相互對齊左）
在正常的HTML嵌套的列表，更深子列表縮進更多。但是樣式表中的某些內容必須將其關閉。我如何找到控制它的東西？我無法在任何文檔中看到li元素的CSS「list indent」屬性。
你正在尋找設置padding-left：
li { padding-left: 1em; }
將縮進每李1EM。由於內部lis已經偏離了外部lis，它應該做你想做的事情。
只需在FF中使用Firebug或Chrome dev-tools：右鍵單擊您的目標和select inspect元素。您可以通過視覺和文本檢查CSS屬性來查看導致崩潰的原因。
你可能要像
ul > li {
margin-left: 10px;
}
規則只是爲了增加上述問題的答案：padding-left將縮進的話，但不是子彈點，而margin-left將縮進子彈點爲好。
我有同樣的問題，因爲你。
有一個在type.less抵消對列表縮進規則：
ul, ol {
padding: 0;
margin: 0 0 @baseLineHeight/2 25px;
}
我結束了重寫規則：
ul, ol {
padding: 0px 25px;
}
縮進嵌套列表是現在回來了。
也許你已經將你的子彈點設置在列表項中，而不是在它之前，這會顯着改變你的外觀。
的CSS應用它：ul { list-style-position: inside; }
瞭解更多關於list-style-position。
它可能是一些風格設置這一個或另一個......只是應用您的顯式設置也許。 – Marius 2015-09-16 21:27:54
使用引導程序，你可以做到這一點的編碼如下。只需粘貼您的JSP或HTML並進行測試即可。你可以通過這個鏈接瞭解更多信息。
http://www.bootply.com/DglnYJTSKA
<div id="MainMenu">
<div class="list-group panel">
<a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a>
<div class="collapse" id="demo3">
<a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu1">
<a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a>
<a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a>
<a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
<a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a>
<a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a>
</div>
<a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a>
</div>
<a href="javascript:;" class="list-group-item">Subitem 2</a>
<a href="javascript:;" class="list-group-item">Subitem 3</a>
</div>
<a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a>
<div class="collapse" id="demo4">
<a href="" class="list-group-item">Subitem 1</a>
<a href="" class="list-group-item">Subitem 2</a>
<a href="" class="list-group-item">Subitem 3</a>
</div>
<a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a>
<div class="collapse" id="demo5">
<a href="#" class="list-group-item">Subitem 1</a>
<a href="" class="list-group-item">Subitem 2</a>
<a href="" class="list-group-item">Subitem 3</a>
</div>
</div>
</div>
CSS：
.list-group.panel > .list-group-item {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.list-group-submenu {
margin-left:20px;
}
使用列表組
這給出了一個嵌套列表執行簡單的辦法：
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
你可以在JSFiddle中重現嗎？你的代碼與twitter引導工作正常適合我：http://jsfiddle.net/3hHwF/ – 2012-02-27 22:31:41