Bootstrap - 自定义卡片

Question

我正在开发一个使用 Bootstrap 4 Alpha 的应用程序。我正在尝试创建一些 cards. I'm trying to recreate something that looks like a course card on this site。但是，我正在尝试使用默认的 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

这样试试：

 <div class="card-header clearfix">
      <i class="fa fa-circle pull-left"></i>
      <div class="text-xs-right pull-right">04.07.2016</div>
    </div>

Answer 2

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

EDIT - 从 BS4 alpha 6 开始，pull-right 已更改为 float-right.

Bootstrap - 自定义卡片

Bootstrap - Customizing Cards

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4