如何将button置于Twitter Bootstrap 3中？
我正在Twitter Bootstrap中创build一个表单，但是我在将表单中input下面的button居中时遇到了问题。 我已经尝试应用center-block类的button，但没有奏效。 我应该如何解决这个问题？
这是我的代码。
<!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block"> Next Step! </button> </div> </div>
用“text-center”类将div包裹在div中。
只要改变这一点：
<!-- wrong --> <div class="col-md-4 center-block"> <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button> </div>
对此：
<!-- correct --> <div class="col-md-4 text-center"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> </div>
根据Twitter的Bootstrap文档： http ： //getbootstrap.com/css/#helper-classes-center
<!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4 center-block"> <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block"> Next Step! </button> </div> </div>
所有的类center-block都是告诉元素有一个0的边距，auto是左/右边距。 但是，除非是class-text-center或css text-align：center; 在父元素上设置，元素不知道这个自动计算的点，所以不会像预期的那样居中。
看到上面的代码示例： https : //jsfiddle.net/Seany84/2j9pxt1z/
<div class="row"> <div class="col-sm-12"> <div class="text-center"> <button class="btn btn-primary" id="singlebutton"> Next Step!</button> </div> </div> </div>
我试了下面的代码，它为我工作。
<button class="btn btn-default center-block" type="submit">Button</button>
button控件是在一个div中，并使用中心块的引导类帮助我将buttonalignmentdiv的中心
检查你会find中心块的链接
您可以通过给予保证金或绝对定位这些元素。
例如
.button{ margin:0px auto; //it will center them }
0px将从顶部和底部，汽车将从左侧和右侧。
<div class=container-fluid"> <div class="col-sm-12 text-center"> <button class="btn btn-primary" title="Submit"></button> <button class="btn btn-warning" title="Cancel"></button> </div> </div>
使用text-align: center CSS属性
添加到你的风格：
显示：表格; 保证金：0汽车;
您可以执行以下操作。 它也避免了button重叠。
<div class="center-block" style="max-width:400px"> <a href="#" class="btn btn-success">Accept</a> <a href="#" class="btn btn-danger"> Reject</a> </div>
它为我工作尝试做一个独立的<div>然后把button 。 像这样 ：
<div id="contactBtn"> <button type="submit" class="btn btn-primary ">Send</button> </div>
然后转到您的CSS样式页面，并像这样做Text-align:center ：
#contactBtn{text-align: center;}
<div class="col-md-6 offset-md-6"> <p></p> <input type="button" value="Load More..." class="btn btn-primary"> </div>
或者你可以给出具体的偏移量，使button的位置，你只需简单地与自举网格系统，
<div class="col-md-offset-4 col-md-2 col-md-offset-5"> <input type="submit" class="btn btn-block" value="submit"/>
这样，如果设置了btn-block，还可以指定button的大小。 当然，这只会在md的大小范围内工作，如果你还想设置其他大小，请使用xs，sm，lg。
