在 Bootstrap 面板中左对齐一个按钮和右对齐两个按钮

Question

我有一个面板，面板主体中有三个按钮。我希望一个按钮位于当前位置（左侧），另外两个按钮位于最右侧。

当前按钮都向左对齐。下面是我写的代码。我尝试了很多东西，包括向右拉和添加按钮组和清除修复，但它们仍然是最左边的。

我也试过这篇文章：Left align and right align within div in Bootstrap

我正在为 CSS 和 JS 使用 bootstrapmin。

这是代码：

<div class="row">
        <div class="form-inline">
            <div class="col-sm-5" style="width: 100%;">
                <div class="panel-group">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Click 'Run' to complete the report.</div>
                        <div class="panel-body" style="background-color: lightgray;">
                            <div class="form-group">
                                <asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click"
                                    class="btn btn-primary btn-sm"/>                                    
                                <div class="btn-group">
                                 <span class="pull-right">
                                    <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
                                    <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

<div class="panel-body" style="background-color: lightgray;">
    <div>
       <asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" class="btn btn-primary btn-sm" />
       <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm myFloat_Right" />
       <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm  myFloat_Right" />
    </div>
</div>

并在您的 cs 文件中添加以下内容：

.myFloat_Right {
    float: right;
}

为我工作。

Answer 2

你走在正确的轨道上。您唯一需要做的就是相应地使用引导类。如果你注意的话，你会发现它们就像一张地图。1. 构建容器，2. 构建行，3. 构建列大小，4. 构建元素，5. 定位它。在这种情况下，您必须使用 和 将左侧按钮包装在左侧列中，并将右侧 btn-group 包装在右侧容器pull-left中pull-right。请注意，在@media响应式代码中，您必须取消右拉，这样它们在智能手机中看起来就不会很有趣。我假设您正在构建响应式设计，否则您不会使用 Bootstrap。;)

这是您的解决方案的代码笔， 在此处输入链接描述

ps 像瘟疫一样避免内联样式。特别是当您有 col-sm-5 但您将宽度强制为 100% 时。这样做没有任何意义。如果您想要 100% 宽度，请使用 col-xs-12