CSS 如何使用 Bootstrap 设置按钮右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20462043/
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
How to set an button align-right with Bootstrap?
提问by user2837851
I am learning Bootstrap. The structure is a container within some context. At the bottom of the container, I put a button next to an description.
我正在学习 Bootstrap。该结构是某种上下文中的容器。在容器的底部，我在描述旁边放了一个按钮。
Now, I want to set the button align to the right without break the bootstrap structure. What should I do? I had set the "float:right" to the button style, but it appeared bad. The button is outside the "alert-info" background and not vertical align. Any better method?
现在，我想在不破坏引导程序结构的情况下将按钮设置为向右对齐。我该怎么办？我已经将“float:right”设置为按钮样式，但它看起来很糟糕。该按钮位于“警报信息”背景之外，而不是垂直对齐。有什么更好的方法吗？
<div class="alert alert-info">
<a href="#" class="alert-link">Summary:Its some description.......testtesttest</a>
<button type="button" class="btn btn-primary btn-lg" style="float:right;">Large button</button>
</div>
回答by Gabriel C. Troia
Just add a simple pull-rightclass to the button, and make sure the container div is clearfixed:
只需在按钮上添加一个简单的pull-right类，并确保容器 div 已清除：
<div class="alert alert-info clearfix">
<a href="#" class="alert-link">Summary:Its some description.......testtesttest</a>
<button type="button" class="btn btn-primary btn-lg pull-right">Large button</button>
</div>
回答by Anam
Try this:
尝试这个：
<div class="row">
<div class="alert alert-info" style="min-height:100px;">
<div class="col-xs-9">
<a href="#" class="alert-link">Summary:Its some
description.......testtesttest</a>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
</div>
</div>
Demo:
演示：
回答by Anuruddha Thennakoon
<div class="container">
<div class="btn-block pull-right">
<a href="#" class="btn btn-primary pull-right">Search</a>
<a href="#" class="btn btn-primary pull-right">Apple</a>
<a href="#" class="btn btn-primary pull-right">Sony</a>
</div>
</div>
回答by Vivek Ramasamy
function Continue({show, onContinue}) {
return(<div className="row continue">
{ show ? <div className="col-11">
<button class="btn btn-primary btn-lg float-right" onClick= {onContinue}>Continue</button>
</div>
: null }
</div>);
}
