引導面板+媒體版面發表評論佈局

Question

我試圖得到像下面這樣的佈局（或一些細微的變化）

-------------------------------------------------------------------- 
| --------------------------------------------------------------- | 
| | ----=----- ------------------------------------------------ | | 
| | |  | |            | | | 
| | | image | |    info       | | | 
| | ---------- ------------------------------------------------ | | 
| | |------------------------------------------------------------ | 
| | |               | | 
| | |  Some body           | | 
| | ------------------------------------------------------------ | 
| ---------------------------------------------------------------- 

     ... continued 

對於評論線程。我不打算做線程評論。只是一個線性評論線程。

Bootstrap提供了media類，我可以做media-left來定位圖像，並使用media-heading/media-body幾乎得到我想要的佈局。

但是，標題/正文將定位到圖像的一側。不好。

我試圖混合面板和媒體。媒體定位圖像/標題（這將是信息部門在這裏）和評論身體/頁腳的按鈕/鏈接回覆等面板

真的，我只是想包括面板，因爲它提供了一個很好的邊界/造型概述身體，我想包括。

所以，他們一直沒有一起打好。一個會溢出另一個錯位等。還沒有找到一個體面的方式來讓這個佈局工作。

幾乎我想用面板/縮略圖佈局：

bootply

面板造型使得這看起來可怕。因此，試圖保持總體佈局但用混合類/模板修改樣式。

有沒有辦法混合媒體類和麪板來獲得上面的佈局？

因此，圖像/信息將是媒體/媒體 - 左/媒體 - 身體和身體部分將面板/面板身體/面板 - 頁腳。我嘗試過的每種方式都溢出來了。

編輯：關閉佈局bootply的HTML包括滿足「質量標準」之前有人評論

<div class="panel-group"> 
    <div class="panel"> 
    <div class="panel-heading"> 
     <div class="row flex-container"> 
     <div class="col-xs-6 col-sm-4 col-md-2"> 
     <div class="thumbnail"> 
      <img src="https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg"> 
      <div class="caption"> 
      <p>A captuion</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-6 col-sm-8 col-md-10"> 
     <p> 
      <span class="pull-left">By: <a href="#">A User</a></span> 
      <span class="pull-right">A timestamp</span> 
     </p> 
     </div> 
    </div> 
    </div> 
    <div class="panel-body"> 
    <p>A random body</p> 
    </div> 
    <div class="panel-footer"> 
    <p>Some footer</p> 
    </div> 
</div> 
</div> 

Answer 1

好了，我的建議是，你用一些簡單的HTML和CSS來做到這一點？

使用引導程序很容易使「響應」。作爲一個加號，這種方式更有前途，不是嗎？

這裏是我的藝術作品：https://jsfiddle.net/DTcHh/17945/

<style type="text/css"> 
body { 
    margin: 10px 10px 0 10px; 
    background: #efe; 
    color: red; 
} 
.container { 
    background: #666; 
    border-radius: 5px; 
    overflow: none; 
    border: red solid 1px; 
    padding: 10px 10px 0 10px; 
} 
.comment-footer-container { 
    padding: 0 5px; 
} 
.comment-footer { 
    background: green; 
    margin: 0; 
} 
.comment-footer p { 
    margin-bottom: 0; 
    padding: 5px; 
} 
</style> 

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12 col-md-2"> 
     <img src="https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg" class="img-responsive"> 
     <p class="text-center"> 
     <small>A Caption</small> 
     </p> 
    </div> 
    <div class="col-sm-12 col-md-5"> 
     <h5>Some Heading</h5> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div class="col-sm-12"> 
     <h5>Another Heading</h5> 
     <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-12"> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> 
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
    </div> 
    <div class="col-sm-12 comment-footer-container"> 
     <div class="comment-footer"> 
     <p class="text-center">Some footer</p> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

找到一個方式來獲得我想要的佈局。標記需要一些工作，但粗略的想法是有

bootply

樣本HTML：

<div class="media"> 
    <div class="row flex-container"> 
    <div class="col-xs-4 col-md-2"> 
     <div class="media-left"> 
     <div class="thumbnail"> 
      <img src="https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg" /> 
      <div class="caption visible-xs"><p>Commenter Name</p></div> 
     </div> 
     </div> 
    </div> 

    <div class="col-xs-8 col-md-10"> 
     <div class="media-heading"> 
     <div class="row text-center"> 
      <div class="col-xs-6"> 
      <p><span class="pull-left hidden-xs">Commenter Name</span> Timestamp</p> 
      </div> 

      <div class="col-xs-6"><a><i class="fa fa-thumbs-o-up"></i>0 Likes</a></div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <p>Some comment body text here.</p> 
    </div> 

    <div class="panel-footer"> 
    <span>Some buttons or something here</span> 
    </div> 
</div>