Html Bootstrap 3 右对齐按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35440928/
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
Bootstrap 3 right align button
提问by Musical Shore
I am trying to right align a button in a grid:
我正在尝试右对齐网格中的按钮：
I would like the button on the right to align with the text area above it.
我希望右侧的按钮与其上方的文本区域对齐。
My code looks something like this:
我的代码看起来像这样：
<div class="row">
<div class="col-xs-2">
Purchase Order
</div>
<div class="col-xs-10">
<textarea />
<textarea />
<div class="row">
<div class="col-xs-9">
<button />
<button />
</div>
<div class="col-xs-2">
<button />
</div>
</div>
</div>
</div>
I have tried adding offsets and adjusting the spans of the different columns...the button is either too far to the left or the right. I have tried adding a fixed margin-left to the right button, this works but it breaks the responsive design.
我尝试添加偏移量并调整不同列的跨度...按钮向左或向右太远。我曾尝试向右侧按钮添加一个固定的左边距，这有效，但它破坏了响应式设计。
NOTE:
笔记：
I can't use pull-right, it is deprecated in Bootstrap 3.
我不能使用 pull-right，它在 Bootstrap 3 中已被弃用。
回答by HoereeBauke
Normally Bootstrap has its own class to pull elements to the right. Try this:
通常 Bootstrap 有自己的类来将元素拉到右边。尝试这个：
<button class="pull-right">Hello</button>
回答by Mike Robinson
Here it is with inline styles. You could also create your own .pull-rightclass.
这是内联样式。您也可以创建自己的.pull-right类。
HTML
HTML
<div class="row">
<div class="col-xs-2">
Purchase Order
</div>
<div class="col-xs-10">
<textarea class="form-control"></textarea>
<button style="float: right">Button Right</button>
<button>Button One</button>
<button>Button Two</button>
</div>
</div>
Optional CSS
可选的 CSS
.pull-right {
float: right !important; // Use of important emulates bootstrap
}
回答by Tricky12
You can give text-leftand text-righta try. They are built in Bootstrap 3 classes that do not require floating divs.
你可以给text-left和text-right一试。它们内置于不需要浮动 div 的 Bootstrap 3 类中。
<div class="row">
<div class="col-xs-12">
Purchase Order
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-8 text-left">
<button class="btn btn-primary">Save PO Tages & Notes</button>
<button class="btn btn-default">Cancel</button>
</div>
<div class="col-xs-4 text-right">
<button class="btn btn-primary">Add PO Notes to Calendar</button>
</div>
</div>
NOTE - I changed your HTML up a bit to make the fiddle look better. They obviously aren't required.
注意 - 我稍微改变了你的 HTML 以使小提琴看起来更好。它们显然不是必需的。
回答by Danilo Sampaio
I had the same problem, i found this solution
我有同样的问题，我找到了这个解决方案
<div style="float: right; margin-top: 30px;" class="col-12">
<button type="submit" class="btn btn-primary">Entrar</button>
</div>
回答by Marek Kus
In the:
在里面：
<div class="row">
<div class="col-xs-9">
<button />
<button />
</div>
<div class="col-xs-2">
<button />
</div>
</div>
...you have col-xs-9 and col-cs-2 whitch dont add to 12 columns bootstrap grid system. Mayby changing col-xs-9to col-xs-10will solve your problem? Or this and pull-right class.
...你有 col-xs-9 和 col-cs-2 ，它们不会添加到 12 列引导网格系统。也许将 col-xs-9 更改为col-xs-10会解决您的问题？或者这个和拉右类。
