Bootstrap 3中的嵌套注释

Question

我想要一个对bootstrap 3中对象的注释列表。该列表需要处理嵌套注释。

我已尝试在引导程序中使用media，但媒体容器没有全宽（http://www.bootply.com/JJyi88KSnn）。我做了一个红色背景来说明问题。

有人制作了漂亮的嵌套评论列表吗？我不认为bootstrap中的media组件足够好。

Answer 1

为什么不在bootstrap 3中使用media-list组件

请阅读文档 http://getbootstrap.com/components/

<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

工作小提琴 http://jsfiddle.net/52VtD/8904/

Answer 2

Boostrap的{​​{1}}文档对我来说不是很清楚，并花了一些时间来弄清楚如何放置media-object。这是html的简化版本，您可以将其复制并粘贴到您的电话线中作为起点：

html的HTML代码段：

media-object

重要提示：

• <ul class="media-list"> <li class="media"> <div class="media-left"> <a href="#"><img alt="64x64" class="media-object" src="http://lorempixel.com/64/64" style="width: 64px; height: 64px;"></a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p> <div class="media"> <div class="media-left"> <a href="#"><img alt="64x64" class="media-object" src="http://lorempixel.com/64/64" style="width: 64px; height: 64px;"></a> </div> <div class="media-body"> <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. <div class="media"> <div class="media-left"> <a href="#"><img alt="64x64" class="media-object" src="http://lorempixel.com/64/64" style="width: 64px; height: 64px;"></a> </div> <div class="media-body"> <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="#"><img alt="64x64" class="media-object" src="http://lorempixel.com/64/64" style="width: 64px; height: 64px;"></a> </div> <div class="media-body"> <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div> </div> </div> </li> </ul> - 即使您没有放入<div class="media-left"></div>，也需要此div元素。这就是创建image。
的原因

祝你好运。