html - Bootstrap - 定制卡片

Question

我正在开发一个使用 Bootstrap 4 Alpha 的应用程序。我正在尝试创建一些 cards 。我正在尝试在this site上重新创建看起来像类(class)卡的东西。但是，我正在尝试使用默认的 Bootstrap 样式。换句话说，我正在尝试创建一张如下所示的卡片:

+------------------------------------------------------------+
| [icon]                                          04.07.2016 |
+------------------------------------------------------------+
| intro                                                      |
| heading                                                    |
| a description that takes a couple of lines. It may         |
| have two or three lines of text and they'll wrap           |
| like this.                                                 |
|                                                            |
| [tag 1] [tag 2]                                            |
+------------------------------------------------------------+

我一直在尝试重新创建这个here 。日期与图标不在同一行。我的代码如下所示:

<br>
<div class="container">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-circle"></i>
      <div class="text-xs-right">04.07.2016</div>
    </div>
    <div class="card-block">
      <div class="text-muted">intro</div>
      <h4 class="card-title">Heading</h4>
      <p class="card-text"> a description that takes a couple of lines. It may have two or three lines of text and they'll wrap like this.</p>
      <ul class="list-inline text-muted">
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 1</li>
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 2</li>        
      </ul>
    </div>
  </div>
</div>

我做错了什么？

Answer 1

对于 Bootstrap 4，它看起来像..

<div class="container">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-circle"></i>
      <div class="pull-xs-right">04.07.2016</div>
    </div>
    <div class="card-block">
      <div class="text-muted">intro</div>
      <h4 class="card-title">Heading</h4>
      <p class="card-text"> a description that takes a couple of lines. It may have two or three lines of text and they'll wrap like this.</p>
      <ul class="list-inline text-muted">
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 1</li>
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 2</li>        
      </ul>
    </div>
  </div>
</div>

更新的 Bootply:http://www.bootply.com/2EY9ZfMrdl

编辑 - 从 BS4 alpha 6 开始，pull-right 已更改为 float-right。