css - 使用 Bootstrap 3 样式/布局用户摘要框

Question

我正在尝试使用 TB3 完成一个(相当)简单的布局，但遇到了一些困难。

我正在尝试创建我称之为“用户摘要”的可重复框，其中每个摘要框如下所示:

地点:

• 左边的空方框是用户的照片
• 顶部矩形是用户的显示名称(“DonaldDoo”)
• 底部矩形是用户的描述(“梦见一打 donut 。”)

注意:我不是在寻找实际的边框(没有黑色边框)，上面的图片只是帮助描绘了我正在努力实现的布局。

无论如何，这是我迄今为止最好的尝试:

<div class="container">
    <div class="well">
        <div>
            <img src="user_photo_here.png" />
            <i>DonaldDoo</i>
            <b>Dreamed a dozen donuts.</b>
        </div>
        <div>
            <img src="another_user_photo.png" />
            <i>WalterWiggins2000</i>
            <b>Washes Waldo Woo.</b>
        </div>
    </div>
</div>

但是这显示不正确。有什么地方会出错吗？

Answer 1

我想这会符合您的要求。我已经更换了 <b>和 <i>带有 <div> 的标签并为他们分配类(class)。

看看这个片段。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 img {
  max-width: 100%;
  height: auto;
}
div.user-summary {
  margin: 10px auto;
}
div.user-summary > img {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0 5px;
}
div.user-name {
  margin: 15px 0 0 0;
  font-style: italic;
  display: block;
}
div.user-status {
  font-weight: bold;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="well">
    <div class="user-summary clearfix">
      <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" />
      <div class="user-name">DonaldDoo</div>
      <div class="user-status">Dreamed a dozen donuts</div>
    </div>
    <div class="user-summary clearfix">
      <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" />
      <div class="user-name">WalterWiggins2000</div>
      <div class="user-status">Washes Waldo Woo.</div>
    </div>
  </div>
</div>