引导面板 + 用于评论布局的媒体布局

Question

我正在尝试获得如下布局（或一些小的变化）

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

      ... continued

用于评论线程。我不打算做螺纹 cmets。只是一个线性评论线程。

Bootstrap 提供了media 类，我可以使用media-left 来定位图像并使用media-heading / media-body 几乎得到我想要的布局。

但是，标题/正文将定位到图像的一侧。不好。

我试图混合面板和媒体。用于定位图像/标题的媒体（此处为信息部分）和评论正文面板/页脚按钮/回复链接等。

我真的只是想包含面板，因为它提供了一个漂亮的边框/样式来勾勒主体，我想包含它。

所以，到目前为止，他们在一起玩得并不好。一个会溢出，另一个会错位等等。还没有找到一种合适的方法来让这个布局正常工作。

几乎是我想要使用面板/缩略图的布局：

bootply

面板样式使这看起来很可怕。因此，尝试保持总体布局，但使用混合类/模板修改样式。

有没有办法混合媒体类和面板来获得上面的布局？

因此图像/信息将是媒体/媒体左侧/媒体主体，而正文部分将是面板/面板主体/面板页脚。我尝试过的每一种方式都非常糟糕。

编辑：包含关闭布局的 bootply html 以满足“质量标准”，然后有人 cmets

<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>