Question

我正在使用一个使用Bootstrap 4 Alpha的应用程序。我正在尝试创建一些cards。我正试图在this site上重新创建看起来像课程卡的东西。但是，我正在尝试使用默认的引导程序样式。换句话说，我正在尝试创建一个看起来像这样的卡片：

+------------------------------------------------------------+
| [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。

Answer 2

试试这样：

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

Bootstrap - 自定义卡

2 个答案: