如何使用Bootstrap 4在div旁边放置链接按钮

Question

我有一个链接按钮，需要放在div的右边。在div上添加float-left，在链接按钮上添加float-right并不能做到这一点。我做错了什么？

https://jsfiddle.net/3v2s4c50/

<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Today and Tomorrow</div>
<div class="card-body">
<div class="float-left">Someone somewhere is waiting for you.</div>
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>  
</div>    
</div>
<div class="col">
2 of 2
</div>
</div>
</div>

Answer 1

移除浮点数并添加：

.card-body{
display: flex;
justify-content: space-between;
align-items: center;
}

Answer 2

<div class="card-body d-flex">
<div class="flex-fill">Someone somewhere is waiting for you</div>
<a role="button" href="google.com" class="flex-fill btn btn-primary"> Login</a>
</div>

Answer 3

好吧，它正在这么做。但屏幕上显示结果的部分不够宽，无法在同一行显示带有文本和按钮的div。。然后它就坏了。如果你把文本改成更小的，比如"有人在等"，你可以看到按钮向右浮动：(您还可以为文本div设置一个固定的宽度(目前它正在根据内容进行扩展(。

<div class="card-body">
<div class="float-left" style="width: 50%;">Someone somewhere is waiting for you</div>
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>    

Answer 4

您可以使用任何类添加到div的链接。然后添加样式"；文本对齐：右"进入您的div，如下所示：

.my-link {
text-align: right;
}

.
<div class="my-link">
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
.

我希望这会有用。