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

Question

我一直在尝试使用两个 span 元素，一个是 Bootstrap 4 class 'close'，另一个是 class '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 实现该目标？谢谢！

Answer 1

你为什么不尝试创建一个新的 div 并放入 "Close" 和 "Badge"？那么只需要将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 这么简单的事情。您需要使用间距工具来调整元素..

<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

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

Float right two span elements in Bootstrap

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4