twitter-bootstrap 在 Bootstrap 面板中左对齐一个按钮和右对齐两个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34372806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left align one button and right align two buttons in Bootstrap panel
提问by The OrangeGoblin
I have a panel with three buttons in the panel body. I want one button to be where it currently is (left) and I want the other two buttons to be on the far right.
我有一个面板，面板主体中有三个按钮。我希望一个按钮位于当前位置（左侧），另外两个按钮位于最右侧。
The buttons currently are all aligned to the left. Below is the code I have written. I have tried numerous things including pull-right and adding button groups and clearfix, but they remain left most.
当前按钮都向左对齐。下面是我写的代码。我尝试了很多东西，包括向右拉和添加按钮组和清除修复，但它们仍然是最左边的。
I have also tried this post: Left align and right align within div in Bootstrap
我也试过这篇文章：在 Bootstrap 中的 div 内左对齐和右对齐
I am using bootstrapmin for both CSS and JS.
我正在为 CSS 和 JS 使用 bootstrapmin。
Here is the code:
这是代码：
<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>
采纳答案by LOTUSMS
You were on the right track. The only thing you had to do was to use the bootstrap classes accordingly. If you pay attention, you'll see they work as a map. 1. build a container, 2. build a row, 3. build a column size, 4. build the element, 5. locate it. In this case, you had to wrap the left button in a left column, and the right btn-group in a right container with pull-leftand pull-right. Mind you, in your @mediaresponsive code you have to nullify the pull-right so that they don't look funny in a smartphone. I am assuming you are building a responsive design otherwise you wouldn't use Bootstrap. ;)
你走在正确的轨道上。您唯一需要做的就是相应地使用引导程序类。如果您注意，您会看到它们像地图一样工作。1. 构建容器， 2. 构建行， 3. 构建列大小， 4. 构建元素， 5. 定位它。在这种情况下，您必须将左侧按钮包装在左侧列中，并将右侧 btn-group 包装在右侧容器中，pull-left并使用和pull-right。请注意，在您的@media响应式代码中，您必须取消右拉，以便它们在智能手机中看起来不那么有趣。我假设您正在构建响应式设计，否则您将不会使用 Bootstrap。;)
Here is a codepen for your solution enter link description here
这是您的解决方案的代码笔 在此处输入链接描述
p.s. Avoid inline styles like the plague. Specially where you have a col-sm-5 but you are forcing a width to 100%. Doesn't make any sense to do that. Use col-xs-12 if you want a 100% width
ps 避免像瘟疫一样的内联样式。特别是在您有 col-sm-5 但您将宽度强制为 100% 的情况下。这样做没有任何意义。如果您想要 100% 的宽度，请使用 col-xs-12
回答by gadi
<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>
and in your cs file add the following:
并在您的 cs 文件中添加以下内容：
.myFloat_Right {
float: right;
}
worked for me.
对我来说有效。
回答by MaxPayne999
Try this
试试这个
<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>
