2

我正在开发一个使用 Bootstrap 4 Alpha 的应用程序。我正在尝试创建一些卡片。我正在尝试在此站点上重新创建看起来像课程卡的东西。但是，我正在尝试使用默认的引导样式。换句话说，我正在尝试创建一张如下所示的卡片：

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

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

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

我究竟做错了什么？

4

2 回答 2

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

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

于 2016-04-07T13:01:49.980 回答
0

试试这样：

 <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>
于 2016-04-07T13:00:08.213 回答