CSS 如何使用 Bootstrap 将按钮居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32183096/
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 align button to center using Bootstrap
提问by Marlon Brando
I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.
我使用 Bootstrap 创建了一个磁贴。在磁贴内，靠近底部我想要磁贴的三个按钮（开始、中间和结束）。
I made the start and end buttons but using two divtags with pull-leftand pull-rightclasses. Now what I want is to place the middle button.
我制作了开始和结束按钮，但使用了两个div标签pull-left和pull-right类。现在我想要的是放置中间按钮。
Here's a part of my code and a screenshot:
这是我的代码的一部分和屏幕截图：
<div class="col-lg-12">
<div class="pull-left">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<!-- I want another button here, center to the tile-->
<div class="pull-right">
<button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
</div>
</div>
采纳答案by Hexaholic
One Bootstrap's most powerful features is nesting rowelements. Every col-*container can have another rowinside it, which then provides another full set of 12 colspaces:
Bootstrap 最强大的功能之一是嵌套row元素。每个col-*容器内都可以有另一个容器row，然后提供另一组完整的 12 个col空间：
<div class="col-lg-12">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Middle Button</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Decline</button>
</div>
</div>
</div>
I'm not sure how your pull-*classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.
我不确定你的pull-*类是如何工作的，但是使用 Bootstrap 的内置网格系统你应该能够摆脱这些。
Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.
不要错过关于嵌套列的Bootstrap 指南，因为它提供了比这个答案更多的信息。
回答by Beno?t badetitou Verhaeghe
Use this option :
使用此选项：
<div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>
回答by Bryan
You're using bootstrap I presume, so your best bet and practice would be to take advantage of its' grid system.
我猜你正在使用引导程序，所以你最好的选择和实践是利用它的'网格系统。
Make a div with a class called row and divide the children inside of that parent div into the content you want.
使用名为 row 的类创建一个 div，并将该父 div 内的子级划分为您想要的内容。
The way this division works is that the number behind col-[size]- decides how much of the horizontal space it will take up. In the end it has to add up to 12, so in your case, we want three parts that are size 4 each.
这种划分的工作方式是 col-[size]- 后面的数字决定它将占用多少水平空间。最后它必须加起来为 12，所以在你的情况下，我们需要三个大小为 4 的部分。
For example :
例如 ：
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
Then simply put the buttons inside of the col-xs-4 div's and you're ready to go.
然后只需将按钮放在 col-xs-4 div 内，您就可以开始了。
回答by Tzvi Gregory Kaidanov
that worked for me
这对我有用
<div class="text-center">
<div class="text-center">
<div class="text-center">
<button type="button" class="btn btn-fb btn-outline-primary waves-effect" (click)="doFacebookLogin()" mdbWavesEffect>
<i class="fa fa-facebook left"></i>Facebook</button>
<button type="button" class="btn btn-tw btn-outline-info waves-effect" (click)="doTwitterLogin()" mdbWavesEffect>
<i class="fa fa-twitter left"></i>Twitter</button>
<button type="button" class="btn btn-gplus btn-outline-danger waves-effect" (click)="doGoogleLogin()" mdbWavesEffect>
<i class="fa fa-google-plus left"></i>Google +</button>
</div>
回答by Ravi Chandran
divide the row div in to 3 column divs - col-md-4. Use text-center for the parent div(col-md-4) of each button to solve the issue.
<div class="row">
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B1</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B2</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B3</button>
</div>
</div>
