Question

在网络应用程序中，我在个人用户的主页上显示来自其他用户的帖子。每个帖子将包含帖子来自的人的缩略图个人资料图片，他们在段落上的姓名，文本内容，然后是回复框和按钮。我试图通过bootstrap的网格系统来做到这一点，但没有达到预期的效果。我想模仿推特主页上的推文，但就我而言，个人资料图片与其他专栏之间存在很大差距。

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-2">
                        <img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

Answer 1

您的.col-sm-2比缩略图更宽，您可以做两件事。

1）您可以使用.col-sm-1作为图像容器。

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-1 narrow">
                        <img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4 narrow">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

2）您可以保留原样，但将bootstraps帮助程序类pull-right添加到您的img标记。

<div class="container" >
    <ul id="newsfeed">
        <li>

            <div class="row">

                    <div class="col-sm-2">
                        <img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
                    </div>
                    <div class="col-sm-4 narrow">
                        <p>9gag@9gag</p>
                        <p>This is me</p>
                        <p>twitted at 12:30pm GMT6+</p>
                    </div>
            </div>

        </li>
    </ul>
</div>

CODEPEN DEMO

Answer 2

您可以使用Media Object组件（就结构而言，可能没有任何其他CSS）。

请参阅工作示例摘录。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
  <div class="container">
    <h1>Posts</h1>

  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-offset-3 col-sm-6">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="http://placehold.it/75x75/000/fff" alt="...">
          </a>

        </div>
        <div class="media-body">
          <p>tweet@tweet</p>
          <p>Some Tweet</p>
          <p>twetted at 12:30pm GMT6+</p>
        </div>
        <form>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Reply</button>
      </span>

          </div>
        </form>
      </div>
      <div class="media">
        <div class="media-body">
          <p>tweet@tweet</p>
          <p>Some Tweet</p>
          <p>twetted at 12:30pm GMT6+</p>
        </div>
        <div class="media-right">
          <a href="#">
            <img class="media-object" src="http://placehold.it/75x75/f00/fff" alt="...">
          </a>

        </div>
        <form>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Reply</button>
      </span>

          </div>
        </form>
      </div>
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="http://placehold.it/75x75/ff0/fff" alt="...">
          </a>

        </div>
        <div class="media-body">
          <p>tweet@tweet</p>
          <p>Some Tweet</p>
          <p>twetted at 12:30pm GMT6+</p>
        </div>
        <form>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Reply</button>
      </span>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

时间线帖子的HTML元素

2 个答案: