我在Twitter Bootstrap中构建一个表单,但我在窗体中输入下面的按钮居中有问题。我已经尝试将center-block类应用于按钮,但这并不奏效。我该如何解决这个问题?

这是我的代码。

<!-- 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>

当前回答

引导3

我们用列划分空间,我们使用8个小列(col-xs-8),我们留下4个空列(col-xs-offset-4),我们应用属性(center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

用于引导4

我们使用Spacing, Bootstrap包括一系列简化和填充的响应边距实用程序类来修改元素的外观。 类的命名格式为xs为{property}{sides}-{size}, sm、md、lg和xl为{property}{sides}-{breakpoint}-{size}。

更多信息请访问:https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

其他回答

您可以执行以下操作。它还避免了按钮重叠。

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

我尝试了下面的代码,它为我工作。

<button class="btn btn-default center-block" type="submit">Button</button>

按钮控件在一个div和使用中心块类的bootstrap帮助我将按钮对齐到div的中心

检查链接,您将找到中心块类

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

Bootstrap 4更新:

用'd-flex'和'justify-content-center'实用工具类包装一个div集的按钮,以利用flexbox。

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

使用flexbox的好处是能够在同一轴上添加额外的元素/按钮,但它们有自己的单独对齐方式。它还提供了使用“align-items-start/center/end”类进行垂直对齐的可能性。

您可以用另一个div包装标签和按钮,以保持它们彼此对齐。

例如,https://codepen.io/anon/pen/BJoeRY?editors=1000

我有这个问题。我使用

<div class = "col-xs-8 text-center">

在我的div包含一些h3行,一对h4行和一个Bootstrap按钮。 在我使用文本中心后,除了按钮之外的所有内容都跳转到中心,所以我进入我的CSS表覆盖Bootstrap并给按钮一个

margin: auto;

这似乎解决了问题。

或者你可以通过简单的自举网格系统,给出特定的偏移量来设置按钮的位置,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

这样,如果你设置了btn-block,也可以指定按钮大小。 当然,这只适用于md大小范围,如果你想设置其他大小,使用xs,sm,lg。