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

找到了一种获得我想要的布局的方法。标记需要一些工作，但粗略的想法是

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>

Answer 2

嗯，我的建议是你只使用一些html和css来完成这个？

使用bootstrap可以很容易地做出响应＆＃34;响应＆＃34;。作为一个加分，它的未来证明不是这样的吗？

这是我的艺术作品：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>

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

2 个答案: