具有嵌套列表的Bootstrap和面板生成不同的列表元素的高度

Question

阅读Bootstrap快速入门我已经创建了一个包含here列表组的面板。

没关系，但存在一些差异：

1. 我需要嵌套另一个列表
2. 我在每个列表元素中都有链接

考虑到这一点，我得到了这个简单面板（plunker）的结果：

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
    <li class="list-group-item">Morbi leo risus
      <ul class="list-group">
        <li class="list-group-item">Lorem</li>
        <li class="list-group-item"><a href="#">Ipsum</a></li>
        <li class="list-group-item">Hello world</li>
      </ul>
    </li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

非常正确但是：

1. 我希望包含单词 Morbi leo risus 和 Hello World 的行将与所有其他行一样高。
2. 我希望嵌套元素的水平线将跨越整个面板宽度（如外部元素）

通过玩元素的课程，有一种方法可以做到这一点吗？如果不是，我怎么能写一个合适的CSS（bootstrap的CSS文件对于我的开发体验来说非常困难）

Answer 1

尝试更改ul，li的边距和填充。并在嵌套的li中添加额外的类来推送文本。为实现此目的，您需要编辑bootstrap css并编写额外的类。