在 Bootstrap 中向右浮动两个 span 元素

【问题标题】：Float right two span elements in Bootstrap在 Bootstrap 中向右浮动两个 span 元素
【发布时间】：2017-04-13 00:41:15
【问题描述】：

我一直在尝试让两个 span 元素，一个带有 Bootstrap 4 类“close”，另一个带有类“badge”，向右浮动。问题是，如果我在徽章上添加 float-right，它们总是会紧挨着。或者，如果我使用 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>

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

【问题讨论】：

都在卡片里面。所以它是

抱歉抱歉，我已经添加进去了。
好的，所以我发布的答案应该有效
是的，但事实并非如此。徽章再次粘在关闭的跨度上。
我想你误解了我的意思。请检查我发布的带有我的问题的图片。徽章需要低于收盘跨度并且与标题在同一行/行中。

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

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

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 的简单问题。您需要使用间距工具来调整元素..

<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

【讨论】：

【解决方案2】：

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

【讨论】：

这对我有用。感谢您指出更清洁、更简单的解决方案！