如何将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中心块的链接

http://getbootstrap.com/css/#helper-classes-center

您可以通过给予保证金或绝对定位这些元素。

例如

 .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。