Question

所以我一直试图将这两个按钮置于引导程序的中心一段时间。我发现已经有一个称为“文本中心”的bootstrap css类，所以我试图使用它但不幸的是无论我在哪里使用它，它都不会改变任何东西。

  <div class="form-group">
    <div class="col-sm-10 text-center">
      <button type="submit" class="btn btn-default">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
 </div>

代码是一种形式，在井中，如果您需要更多信息，请告诉我。感谢

Answer 1

使用.center-block类，这是在bootstrap框架中集中元素的最佳方法

<div class="form-group">
<div class="col-sm-10 center-block">
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</div>
</div>

Answer 2

一旦包含bootstrap css文件，您的代码段就会起作用（见下文）。您可能还有其他代码影响页面的这一部分 - 请尝试检查浏览器控制台，看看哪些样式覆盖了您的预期样式。

您还需要使用偏移值来“居中”。你的col-sm-10如果你不想使用col-sm-12

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
                    <div class="col-sm-10 col-sm-offset-1 text-center">
                        <button type="submit" class="btn btn-default">Submit</button>
                        <button type="reset" class="btn btn-default">Reset</button>
                    </div>
                </div>

＆＃13;

Bootstrap文本中心不能处理按钮

2 个答案: