Css 引导按钮不会向右移动

我已根据尝试在按钮上使用

向右浮动

，但无法使4个按钮中的3个移动到其包含div的右侧。我做错了什么

请注意，我希望

提交表单

按钮保持原样

无法访问JSFIDLE的用户的代码：

<div class="container">
    <div class="row mt-1 px-3">
        <div class="col-lg-12">
            <p>
            div above buttons
            </p>
        </div>
        <div class="col-lg-12">              
            <div class="btn-toolbar">
                <button type="submit" class="btn btn-success mr-1">Submit the form</button>
                <button type="button" id="SaveDraft" class="btn btn-outline-primary mr-1 float-right">Save Draft</button>
                <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1 float-right" >Restore Draft</button>
                <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 float-right">Delete All Drafts</button>
            </div>
        </div>
    </div>
</div>

按钮上方的div

提交表格
保存草稿
恢复吃水
删除所有草稿

---

我还尝试将

btn工具栏

更改为

btn组

您可以执行以下操作：

<div class="container">
<div class="row mt-1 px-3">
    <div class="col-lg-12">
        <p>
        div above buttons
        </p>
    </div>
    <div class="col-lg-12">              
        <div class="btn-toolbar">
            <button type="submit" class="btn btn-success mr-1">Submit the form</button>
          <div style="margin-left: auto;">
            <button type="button" id="SaveDraft" class="btn btn-outline-primary mr-1 ">Save Draft</button>
            <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1" >Restore Draft</button>
            <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 ">Delete All Drafts</button>
          </div>
        </div>
    </div>
</div>

按钮上方的div

提交表格
保存草稿
恢复吃水
删除所有草稿

---

您的问题是因为

.btn toolba

使用

显示：flex您可以通过添加类和更改显示值来修改该行为并仅针对该div，如下所示：


.row{
背景#f8f9fa；
边缘顶部：20px；
}
.col-lg-12{
边框：实心1px#6c757d；
填充：10px；
}
.test.btn-toolbar{
显示：块！重要；
}

帕拉格·帕特尔

按钮上方的div

提交表格
保存草稿
恢复吃水
删除所有草稿
看起来.btn工具栏正在使用flexbox定位内容。设置addjustify content:flex end将按钮向右移动。我注意到这似乎改变了按钮的顺序。知道为什么吗？因为它是层叠式的，所以第一个项目将被推到右边，然后下面的项目将被推到后面，如果右边已经有元素，那么它将被放在该元素后面，如果你想保持顺序，你需要用span或div包装按钮，并且只将float right分配给span或div并移除从按钮上向右浮动这很有意义。谢谢！：）