在Bootstrap中浮动右两个span元素

Question

我一直在尝试使用两个span元素，一个使用Bootstrap 4 class＆＃39; close＆＃39;另一个带有班级徽章＆＃39;，向右浮动。问题是，如果我向徽章添加浮动权限，它们总是紧挨着彼此。或者，如果我使用clear：对，徽章将落到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>

如何使用Bootstrap 4实现这一目标？谢谢！

Answer 1

为什么不尝试创建一个新的div并放入“关闭”和“徽章”？然后你只需要将div浮动到右边。 告诉我它是否有效！

Answer 2

您可以在徽章周围使用边距或填充（间距工具）..

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并不是一件简单的事情。您需要使用spacing 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