logo标签列表

如何在Twitter Bootstrap 3中居中按钮？

htmlcsstwitter-bootstrapbutton
270

我正在使用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>
14个回答
1

对我来说有效 尝试创建一个独立的<div>，然后将button放入其中。 就像这样：

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

然后转到您的CSS样式页面，像这样执行Text-align:center：

#contactBtn{text-align: center;}
1
你可以执行以下操作。这也避免了按钮重叠。
<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>
0

我曾经遇到过这个问题。我使用了

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

在我的 div 中包含了几个 h3 行、几个 h4 行和一个 Bootstrap 按钮。在使用 text-center 后，除了按钮以外的所有内容都跳到了中心，因此我进入了我的 CSS 样式表，覆盖了 Bootstrap，并给按钮设置了一个。
margin: auto;

这似乎解决了问题。

-2

或者你可以使用Bootstrap网格系统来指定具体的偏移量，以便将按钮放置在你想要的位置。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接