Bootstrap v4 float-right 不起作用。 [替换为右拉]答案

【问题标题】：Bootstrap v4 float-right doesn't work. [Replacement for pull-right]Bootstrap v4 float-right 不起作用。 [替换为右拉]
【发布时间】：2021-09-12 21:28:38
【问题描述】：

基本上，我有最新版本的引导程序Currently v4.0.0-beta.3，我无法让元素与官方文档正确对齐。我在网上搜索了解决方案，但我一无所获。他们都想用right: 0; 创建一个新类，但这不是重点。谁能告诉我我做错了什么，还是只是一个错误？

我还发现一篇帖子很遗憾 flex 是问题所在，但他们没有解释为什么或如何解决它。

我什至从文档中获取了他们的官方示例，它不起作用。示例如下：

<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

结果：

Float left on all viewport sizesFloat right on all viewport sizesDon't float on all viewport sizes

我将它们放在 div 和 row 类中，没有任何改变。

对于那些不知道的人，Bootstrap 在最新版本中删除了pull-right 类并用float-right 替换它。

【问题讨论】：

您能否添加您所看到内容的屏幕截图以及您正在使用的确切代码？
其他 Bootstrap 4.0b3 类是否正常工作？ It seems to work fine here
这是实际代码，只是替换了里面的文字，输出是复制粘贴。
是的，它们中的大多数都在工作。整个页面都基于它。
如果你想在row、use the col and offset classes 内将 div 推到右侧。 float-right 不适合这样使用。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

在引导中，行只能包含列，因此您必须在行内至少添加一列

失败

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="float-left">Float left on all viewport sizes</div><br>
  <div class="float-right">Float right on all viewport sizes</div><br>
  <div class="float-none">Don't float on all viewport sizes</div>
</div>

作品

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
    <div class="col">
        <div class="float-left">Float left on all viewport sizes</div><br>
        <div class="float-right">Float right on all viewport sizes</div><br>
        <div class="float-none">Don't float on all viewport sizes</div>
    <div>
</div>

【讨论】：

【解决方案2】：

引导程序 5

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class=vw-100> 
    <div class="row w-100">                   
        <div class="col">
            <h4 class="float-start" id="myid">my text</h4>
            <button type="button" class="float-end">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
   </div>
</div>

【讨论】：