在Bootstrap面板中左对齐一个按钮并右对齐两个按钮[关闭]答案

【问题标题】：Left align one button and right align two buttons in Bootstrap panel [closed]在Bootstrap面板中左对齐一个按钮并右对齐两个按钮[关闭]
【发布时间】：2016-03-26 04:15:18
【问题描述】：

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

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

我也试过这个帖子：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>

【问题讨论】：

这是我编写和测试过的代码，我还在 Bootstrap、jsfiddle.net、Google 和 Stack 上进行了调查，包括过去一天。我请求帮助，因为我已经用尽了我的研究。非常感谢您的帮助。
抱歉jsfiddle.net/orangegoblin/j2gtr9k7
因为我有asp按钮，它们在小提琴中重叠，但它们在页面中是分开的。

标签： css asp.net twitter-bootstrap

【解决方案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;
}

为我工作。

【讨论】：

【解决方案2】：

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

这是您的解决方案的代码笔 enter link description here

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

【讨论】：

现在说得通了。我误解了按钮组。您还通过使用 col-xs-12 解决了屏幕较小时的布局问题。我会更好地研究这个。再次感谢。

【解决方案3】：

试试这个

<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="pull-left">
                                    <asp:Button ID="btnRun" runat="server" Text="Run"
                                        class="btn btn-primary btn-sm" />
                                </div>
                                <div 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" />

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

【讨论】：

感谢您的回复，快到了，我需要为每个按钮添加两个按钮组，然后拉对齐。不过，感谢您的宝贵时间。