Float右兩個跨度元素Bootstrap

Question

我一直試圖讓兩個跨度元素，一個Bootstrap 4類'關閉'，另一個類'徽章'，漂浮正確。問題是如果我在徽章上添加浮動權，他們總是彼此緊挨着。或者，如果我使用clear：right，徽章就會落到div的末尾。

這需要我的提綱：

這裏的HTML我到目前爲止：

<div class="card"> 
    <div class="card-header"> 
    <span class="close">x</span> 
    <img src="image.png"> 
    <h1 class="card-title d-inline">Title</h1> 
    <span class="badge badge-default d-inline">Badge</span> 
    <h2 class="card-subtitle">Subtitle</h2> 
    </div> 
</div> 

我怎麼能做到這一點與引導4？謝謝！

Answer 1

您可以使用保證金或填充（間距utils的）周圍的徽章..

http://www.codeply.com/go/XEbOw2F29d

<div class="card"> 
    <div class="card-header"> 
     <span class="close">x</span> 
     <span class="badge badge-default float-right m-2">Badge</span> 
     <img src="//placehold.it/40"> 
     <h1 class="card-title d-inline">Title</h1> 
     <h2 class="card-subtitle">Subtitle</h2> 
    </div> 
</div> 

編輯一樣顯示在

如果你正在尋找的東西你的形象，這不是一個簡單的問題float-right。你需要使用的間距utils的調整要素..

<div class="card"> 
    <div class="card-header pt-0"> 
     <div class="w-100 text-right close">x</div> 
     <img src="//placehold.it/60" class="float-left mt-2 mr-2"> 
     <span class="badge badge-default float-right mt-2">Badge</span> 
     <h1 class="card-title my-0"> Title</h1> 
     <h2 class="card-subtitle d-inline-block">Subtitle</h2> 
    </div> 
</div> 

http://www.codeply.com/go/XEbOw2F29d

Answer 2

爲什麼不嘗試創建一個新的div並放入「關閉」和「徽章」？那麼你只需要將div浮動到右邊。 告訴我，如果它的工作！