Bootstrap - Kartları Özelleştirme

Question

Bootstrap 4 Alpha kullanan bir uygulama üzerinde çalışıyorum. Bazı cards oluşturmaya çalışıyorum. this site'da kurs kartı gibi görünen bir şeyi yeniden oluşturmaya çalışıyorum. Ancak, varsayılan önyükleme stilini kullanmaya çalışıyorum. Bu here yeniden deneme oldum

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

: Başka bir deyişle, ben şöyle bir kart oluşturmak için çalışıyorum. Tarih, simgeyle aynı satırda değil. Kodum şunun gibi:

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

Neyi yanlış yapıyorum?

Answer 1

Bootstrap 4 için bu

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

.. gibi görünecektir Güncelleme Bootply: http://www.bootply.com/2EY9ZfMrdl

DÜZENLEME - BS4 alfa 6 itibariyle pull-right, float-right olarak değiştirilmiştir.

Answer 2

böyle deneyin:

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