将 bootstrap-4 按钮向右移动而不弄乱格式答案

【问题标题】：Moving bootstrap-4 button to the right without messing up format将 bootstrap-4 按钮向右移动而不弄乱格式
【发布时间】：2019-04-17 01:20:30
【问题描述】：

我对 bootstrap-4 非常陌生，我使用它制作了一个简单的社交媒体网站。我试图通过“float-right”将我的创建帖子、登录和注册按钮设置在右侧，但它弄乱了格式？任何建议将不胜感激。

我期待这个，但在右边 https://imgur.com/nhqLk2M

提交按钮

<div class="form-group">
    {{ form.submit(class="btn btn-outline-info float-right") }}
</div>

【问题讨论】：

标签： html css button bootstrap-4

【解决方案1】：

尝试使用父类form-group 的text-right 来对齐按钮右侧。

<div class="form-group text-right">
    {{ form.submit(class="btn btn-outline-info float-right") }}
</div>

试试下面的格式：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group text-right">
    <button type="button" class="btn btn-outline-info" value="">Submit</button>
</div>

【讨论】：

【解决方案2】：

您需要将 float-right 类应用于父 div - 否则您将在 div 中浮动按钮，而不是将 div 浮动到页脚的右侧。

<div class="form-group float-right">
    {{ form.submit(class="btn btn-outline-info") }}
</div>

【讨论】：

您好，感谢您的回答，但是当我将 pull-right 放在那里时，什么都没有改变。有什么想法吗？
抱歉 - 我习惯于引导 3（它使用 pull-right） - 你在 BS 4 中使用浮动是正确的 - 我已经修改了我的答案，将浮动应用于包含按钮的 div
这是我改成那个后得到的。有什么办法可以在内容框中获取按钮？ imgur.com/gallery/ZjfS5SP
我实际上不明白为什么它首先会被推出白框，因为它在我添加“float-right”之前就在里面
那是因为使用 float 的变幻莫测 - 您需要将 clearfix 类（或它的 BS 4 版本）添加到页脚 - 或者简单地将 thge text-right 类应用于页脚。基本上当您浮动一个项目时 - 您需要清除浮动以允许正确布局。

【解决方案3】：

原来我没有在课堂部分添加文本，所以它不起作用，新手编码员的新手错误，对不起大家

【讨论】：