Question

我正在使用bootstrap 4而且我无法正确设置按钮/链接的中心 - 无论我如何尝试使用text-center类（用div或链接包围它）

<div class="row text-center">
  <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>

codepen： https://codepen.io/anon/pen/GdbPyr

Answer 1

只需将justify-content-center添加到父组件即可。代码如下所示：

<!-- ******Key Features****** -->
<section class="key-features ">
  <div class="container pt-4">
    <div class="row justify-content-center"style="background: red">
      <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>

工作笔：https://codepen.io/manAbl/pen/bMPOJM?editors=1000;

- 我添加了背景只是为了提示，这是一些非常有用的东西，让我不时有一些观点 -

希望有帮助：）

Answer 2

您可以使用text-center替换btn上的mx-auto，以强制连左/右边距：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<section class="key-features ">
  <div class="container pt-4">
    <div class="row">
      <a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>

无法在容器中成功地居中按钮

2 个答案: