Bootstrap 3中的嵌套註釋

Question

我想要引導程序3中的對象的註釋列表。該列表需要處理嵌套註釋。

我試過在引導中使用media，但媒體容器沒有全寬（http://www.bootply.com/JJyi88KSnn）。我用紅色背景來說明問題。

有人做了一個漂亮的嵌套評論列表？我認爲bootstrap中的media組件不夠好。

Answer 1

爲什麼不使用媒體列表組件中的自舉3

請閱讀文檔 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文檔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> - 即使您沒有將image放置在此處，也需要此div元素。這是創建indentation的原因。

祝你好運。